如何在jQuery中根据复选框选择向表中添加和删除<tr>

在jQuery中，您可以使用事件监听器来响应复选框的选择变化，并根据这些变化动态地向表格中添加或删除行（<tr>）。以下是一个简单的示例，展示了如何实现这一功能：

HTML结构

<table id="myTable">
  <thead>
    <tr>
      <th>选择</th>
      <th>名称</th>
    </tr>
  </thead>
  <tbody>
    <!-- 动态添加的行将出现在这里 -->
  </tbody>
</table>

<div id="checkboxContainer">
  <!-- 假设这里有一些复选框 -->
  <input type="checkbox" name="item1" value="Item 1"> Item 1
  <input type="checkbox" name="item2" value="Item 2"> Item 2
  <!-- 更多复选框 -->
</div>

jQuery脚本

$(document).ready(function() {
  // 监听复选框的变化
  $('#checkboxContainer input[type="checkbox"]').change(function() {
    var isChecked = $(this).is(':checked');
    var itemName = $(this).val();

    if (isChecked) {
      // 如果复选框被选中，添加行
      $('#myTable tbody').append('<tr><td><input type="checkbox" checked></td><td>' + itemName + '</td></tr>');
    } else {
      // 如果复选框未被选中，删除对应的行
      $('#myTable tbody tr').each(function() {
        if ($(this).find('td:nth-child(2)').text() === itemName) {
          $(this).remove();
        }
      });
    }
  });
});

解释

HTML结构：创建一个表格和一个包含复选框的容器。
jQuery脚本：
- 使用$(document).ready()确保DOM完全加载后再执行脚本。
- 使用change()事件监听复选框的状态变化。
- 当复选框被选中时，向表格中添加一行，包含复选框和对应的项名称。
- 当复选框未被选中时，遍历表格中的所有行，找到与复选框值匹配的行并删除它。