Tablesorter如何从表中删除选定的行答案

【问题标题】：Tablesorter how to remove selected rows from tableTablesorter如何从表中删除选定的行
【发布时间】：2019-11-12 15:44:56
【问题描述】：

此处的示例显示了如何将新行追加到 tablesorter 表中。 https://mottie.github.io/tablesorter/docs/example-add-rows.html 如何从表中删除选定的行？我打算添加一个带有复选框元素的列，如下所示。但是如何以更新表的方式触发删除和删除过程？

<table class="tablesorter">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Age</th>
      <th>Total</th>
      <th>Discount</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox"></td>
      <td>Peter</td>
      <td>Parker</td>
      <td>28</td>
      <td class="discount">$9.99</td>
      <td>20%</td>
      <td>Jul 6, 2006 8:14 AM</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>John</td>
      <td>Hood</td>
      <td>33</td>
      <td class="discount">$19.99</td>
      <td>25%</td>
      <td>Dec 10, 2002 5:14 AM</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>Clark</td>
      <td>Kent</td>
      <td>18</td>
      <td class="discount">$15.89</td>
      <td>44%</td>
      <td>Jan 12, 2003 11:14 AM</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>Bruce</td>
      <td>Almighty</td>
      <td>45</td>
      <td class="discount">$153.19</td>
      <td>44%</td>
      <td>Jan 18, 2001 9:12 AM</td>
    </tr>
  </tbody>
</table>

目前我在表格中添加新元素：

var row = '<tr><td><input type="checkbox"></td><td>'+ano+'</td><td>'+aname+'</td><td>'+anumber.value+'</td><td>'+start+'</td><td>'+ende+'</td></tr>';
              $row = $(row),
              resort = true;
            $('#table1')
              .find('tbody').append($row)
              .trigger('addRows', [$row, resort]);

我的问题是，如果我在表中添加了无效项目，我需要有可能再次删除它。 @mottie,@marc 感谢您的支持。我现在用这个 javascript 代码解决了这个问题：


        function RemoveRow(row){

            var table = document.getElementById ("table");
            var count=1;
            var rowcount = table.rows.length;
              $('#table tr:has(td)').find('input[type="checkbox"]').each(function() {
                count++;
                if ($(this).prop("checked") == true){
                    table.deleteRow(count);
                    count--;
                }
              });
            var resort = true;
            $("#table1").trigger("update", [resort]);
        }

上面的代码可以满足我的需要，除了我不确定这是否繁琐的编码。

【问题讨论】：

如果您的<tr> 有一个ID，并且关联的复选框引用了该行的ID，那么它变得非常简单。我建议你朝着那个方向前进。
@Marc 我的问题是这不是一个标准的 html 表，而是一个 tablesorter 表。我对内部结构了解不够。
但是您知道如何添加一行，这是您提供的示例。那只是HTML。即，这就是结构。
不使用addRows，而是使用update在添加或删除行后更新tablesorter的内部缓存。
我已经更新了上面的代码。

标签： javascript row tablesorter

【解决方案1】：

我是这样解决的：

 function RemoveRow(row){

            var table = document.getElementById ("table");
            var count=1;
            var rowcount = table.rows.length;
              $('#table tr:has(td)').find('input[type="checkbox"]').each(function() {
                count++;
                if ($(this).prop("checked") == true){
                    table.deleteRow(count);
                    count--;
                }
              });
            var resort = true;
            $("#table1").trigger("update", [resort]);
        }

【讨论】：