jquery内联编辑get复选框值取决于所单击的行

Question

我正试图在wordpress中对我的wp_list_table进行内联编辑，但我遇到了麻烦。

问题是每个元素/td是由2个类组成的列示例：

<td class="name column-name" contenteditable="true">

这不足以让我进行内联编辑。因此，我转向了复选框，而不是它们是这样构建的：

<th class="check-column" scope="row">
<input type="checkbox" value="1976" name="movie[]">

现在，值是我的表的唯一id，这是我的内联编辑所需要的，但是我不知道如何正确地存储这个值，因为我得到了30+行，但是我必须处理类。

我走到这一步，

var id_val = $("input[name='movie[]']:checkbox").val();

但是它是无用的，因为它总是只获取第一行的id。

编辑: html代码：

<tr>
<th class="check-column" scope="row">
<input type="checkbox" value="1976" name="movie[]">
</th>
<td class="name column-name" contenteditable="true">Alexander Lausten</td>
<td class="datec column-datec" contenteditable="true">2015-06-09</td>
<td class="start column-start" contenteditable="true">12:00:00</td>
<td class="slut column-slut" contenteditable="true">23:00:00</td>
<td class="pause column-pause" contenteditable="true">0.50</td>
<td class="egenb column-egenb" contenteditable="true">130.00</td>
<td class="betaling column-betaling" contenteditable="true">3076.60</td>
</tr>

这是表中每一行的标记。

编辑:我需要一些方法在我的表格上单独显示复选框值。示例:如果我按下第2行的name列，则需要它来获取第2行的checkbox上的值，而不必选中该框

这最终成为了我的解决方案。

首先，我使用代码$(function() { $('.wp-list-table tr‘)).each(function(I){

    $(this).attr('id', 'row'+(i-1));
    i++;
});

然后我用这个捕捉tr id

  var trid;
        $('.wp-list-table tr').click(function() {
       trid = $(this).attr('id');  

  });

然后我用下面的代码获取复选框的值：

var id = $( "tr#" + trid + " th.check-column input[name='movie[]']:checkbox").val();

Answer 1

如果我正确理解了你的问题，那么你需要这样的东西：

$("input[name='movie[]']:checkbox").click( function() {
    console.log($(this).val());    
});

演示小提琴：http://jsfiddle.net/ddan/7z8a88yt/1/

根据您的评论查看更新的JSFiddle：http://jsfiddle.net/7z8a88yt/3/

Answer 2

使用name=“电影”

<tr>
<th class="check-column" scope="row">
<input type="checkbox" value="1976" name="movie">
</th>
<td class="name column-name" contenteditable="true">Alexander Lausten</td>
<td class="datec column-datec" contenteditable="true">2015-06-09</td>
<td class="start column-start" contenteditable="true">12:00:00</td>
<td class="slut column-slut" contenteditable="true">23:00:00</td>
<td class="pause column-pause" contenteditable="true">0.50</td>
<td class="egenb column-egenb" contenteditable="true">130.00</td>
<td class="betaling column-betaling" contenteditable="true">3076.60</td>
</tr>

尝试此操作以获取数组中的所有in

var ids=[];
$("input[name='movie']").each(function(){
 ids.push($(this).val());
});

将所有字段设置为可编辑的步骤

$("input[name='movie']").each(function(){
 $(this).click(function(){
  var row=$(this).parent().parent();
  if($(this).is(':checked')){
   row.find('[contenteditable="true"]').each(function(){
   var inputFld=$('<input type="text" />');
   inputFld.val($(this).text());
   $(this).html(inputFld);
   });
  }else{
   row.find('[contenteditable="true"]').each(function(){
   var val=$(this).find('input').val();  
   $(this).html(val);
   });
  }
 })
});