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

jQuery table - How to write text in cell depending on checkbox checked

本文关键字：复选框 单元格 文本 jQuery 何根      更新时间：2023-09-26

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

•.删除//这是复选框列 ，

•。同上，

•。描述

•。旗

并有一个带有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();
       });
   });
  });
 });

你可以像下面这样做。

$('.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"/>

$('.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
    });
  });
});

这样做

演示

使用这个：

$('.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();
         }
      });
  });
 });

元素属性应class="table"喜欢这个

.HTML

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

杰奎里

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

编辑

您可以使用更简单的函数：

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

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

相关文章：