jQuery表-如何根据选中的复选框在单元格中写入文本

Question

我有一个简单的表，其中class=".table"包含4列，其类如下

•.delete //这是复选框列，

•。ID，

•。描述，

•。旗

并有一个带有class=".savebtn"的按钮。 我需要什么：当用户选中".delete"列中的任何复选框单元格时，在带有文本“ d”的同一行中更新标志单元格，然后在用户单击".savebtn"时删除此选中的行。

我尝试此代码，但无法正常工作，请帮助我：

 $('.savebtn').click(function() {
  $('.cf-table-block tbody tr').each(function() {
    $(this).find($("input[name='delete[]']:checked")).each(function() {
      $(this).change(function() {
        $(this).closest("tr").find(".flag input").val("d"));  
        $(this).closest('tr').remove();
       });
   });
  });
 });

Answer 1

元素属性应为class="table"如下所示

的HTML

<p class="myClass"></p>

jQuery查询

$(".myClass").click( ...

编辑

您可以使用一个更简单的功能：

$('.savebtn').click(function() {
  $("td input.delete:checked").each(function(index, element) {
    $(element).closest("tr").remove();
  });
});

它的作用是，当单击具有“ savebtn”类的按钮时，它将找到所有已选中的具有“ delete”类的输入元素。 对于它们中的每一个，它都会找到最接近的tr并将其删除。

Answer 2

 $('.savebtn').click(function() { $('.cf-table-block tbody tr').each(function() { console.log($(this)) $(this).find($(".delete:checked")).each(function() { $(this).closest("tr").find("input:text.flag").val("d"); //$(this).closest('tr').remove(); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="1" class='cf-table-block'> <tr> <th>Delete</th> <th>ID</th> <th>Description</th> <th>Flag</th> </tr> <tr> <td align="center"> <input type="checkbox" class="delete"> </td> <td>any Data</td> <td>any Data</td> <td> <input type="text" class="flag" /> </td> </tr> <tr> <td align="center"> <input type="checkbox" class="delete"> </td> <td>any Data</td> <td>any Data</td> <td> <input type="text" class="flag" /> </td> </tr> <tr> <td align="center"> <input type="checkbox" class="delete"> </td> <td>any Data</td> <td>any Data</td> <td> <input type="text" class="flag" /> </td> </tr> <input class="savebtn" style="width: 65px; font-size: 16px;" type="button" value="Save"> 

$('.savebtn').click(function() {
  $('.cf-table-block tbody tr').each(function() {//added the class in html
    console.log($(this))
    $(this).find($(".delete:checked")).each(function() {//no attr name but class
      $(this).closest("tr").find("input:text.flag").val("d");//input type text with class flag
      //$(this).closest('tr').remove();//commented to see the letter d
    });
  });

});

做这个

演示

Answer 3

用这个：

$('.savebtn').click(function() {
  $('.cf-table-block tbody tr').each(function() {
    $(this).find($("input[name='delete[]']:checked")).each(function() {
        if($(this).closest("tr").find(".flag input").text().indexOf("d") > -1)){ 
        $(this).closest('tr').remove();
         }
      });
  });
 });

Answer 4

您可以按照以下步骤进行操作。

 $('.savebtn').click(function() { $('.delete :checkbox:checked').closest('tr').remove(); }); $('.delete :checkbox').change(function() { var d = this.checked ? 'd' : ''; $(this).closest("tr").find(".flag").val(d); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="1"> <tr> <th>Delete</th> <th>ID</th> <th>Description</th> <th>Flag</th> </tr> <tr> <td class="delete"><input type="checkbox"/></td> <td>any data</td> <td>any data</td> <td><input type="text" class="flag" /></td> </tr> <tr> <td class="delete"><input type="checkbox"/></td> <td>any data</td> <td>any data</td> <td><input type="text" class="flag"/></td> </tr> <tr> <td class="delete"><input type="checkbox" /></td> <td>any data</td> <td>any data</td> <td><input type="text" class="flag" /></td> </tr> </table> <input type="button" class="savebtn" value="Save"/>