【问题标题】:jQuery delete all table rows except firstjQuery删除除第一行之外的所有表行
【发布时间】:2010-09-27 01:37:54
【问题描述】:

使用 jQuery,如何删除表中除第一行之外的所有行?这是我第一次尝试使用索引选择器。如果我正确理解了这些示例,则以下内容应该有效:

$(some table selector).remove("tr:gt(0)");

我将其读作“在 jQuery 对象中包装一些表,然后删除这些行的元素索引大于零的所有 'tr' 元素(行)”。实际上,它执行时不会产生错误,但不会从表中删除任何行。

我缺少什么,我该如何解决?当然,我可以直接使用 javascript,但是我对 jQuery 非常感兴趣,所以我想使用 jQuery 来解决这个问题。

【问题讨论】:

  • 任何人都知道为什么给定的代码不起作用?将过滤器选择器放入删除功能时我也遇到问题
  • 现在我对这一点有了更好的理解,上面的代码不起作用,因为 $(some table selector) 只选择 table 元素,而不选择它的任何子元素,所以没有 'tr' 元素要查找的删除功能。使用 find 函数在表格元素的子元素中搜索匹配项。

标签: jquery jquery-selectors


【解决方案1】:

这应该有效:

$(document).ready(function() {
   $("someTableSelector").find("tr:gt(0)").remove();
});

【讨论】:

  • 如果我想删除除 first 和 seconde 之外的表行怎么办?
  • @user594166 使用 gt(1) 而不是 gt(0)。
  • 来自 jQuery 网站:Because :gt() is a jQuery extension and not part of the CSS specification, queries using :gt() cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use $("your-pure-css-selector").slice(index) instead. 我建议使用 $("#mytable > tr").slice(1).remove();
  • 您的代码对我不起作用..我将 gt(0) 更改为 gt(1) 并且这有效。
【解决方案2】:

考虑到意图,我认为这更具可读性:

$('someTableSelector').children( 'tr:not(:first)' ).remove();

通过限制搜索的深度,使用子元素还可以处理第一行包含表格的情况。

如果你有一个 TBODY 元素,你可以这样做:

$("someTableSelector > tbody:last").children().remove();

如果你有 THEAD 或 TFOOT 元素,你需要做一些不同的事情。

【讨论】:

  • re: 做点不一样的事.... 这行得通:$('someTableSelector > tbody:last > tr:not(:first)').remove();
  • 要删除所有孩子,我必须使用双引号。不然没认出来。 $("#tasks").children().remove();
【解决方案3】:

实现此目的的另一种方法是使用 jQuery 的 empty() 函数和表中的 thead 和 tbody 元素。

表格示例:

<table id="tableId">
<thead>
    <tr><th>Col1</th><th>Col2</th></tr>
</thead>
<tbody>
    <tr><td>some</td><td>content</td></tr>
    <tr><td>to be</td><td>removed</td></tr>
</tbody>
</table>

还有 jQuery 命令:

$("#tableId > tbody").empty();

这将删除表格的 tbody 元素中包含的每一行,并将 thead 元素保留在标题应位于的位置。当您只想刷新表格的内容时,它会很有用。

【讨论】:

  • 这可能是所有提供的解决方案中性能最好的,而且非常优雅。
【解决方案4】:

如果是我,我可能会把它归结为一个选择器:

$('someTableSelector tr:not(:first)').remove();

【讨论】:

  • 同意,但更具体的必须说:$('someTableSelector tbody tr:not(:first)').remove();
【解决方案5】:

您的选择器不需要在您的移除中。

它应该看起来像:

$("#tableID tr:gt(0)").remove();

这意味着选择表中 ID 为 tableID 的除第一行之外的每一行,并将它们从 DOM 中删除。

【讨论】:

  • 我同意。在我的例子中,表格对象之前已被选中。
  • 删除除第一行以外的所有行:- $("#tableID tr:gt(1)").remove();
【解决方案6】:
$('#table tr').slice(1).remove();

我记得遇到“切片”比所有其他方法都快,所以就把它放在这里。

【讨论】:

  • 有些对我不起作用。接受的答案似乎可以解决问题。
  • gt 已弃用,这是最好的答案。
【解决方案7】:

考虑一个 ID 为 tbl 的表:jQuery 代码将是:

$('#tbl tr:not(:first)').remove();

【讨论】:

    【解决方案8】:

    要删除除第一行以外的所有行(标题除外),请使用以下代码:

    $("#dataTable tr:gt(1)").remove();

    【讨论】:

      【解决方案9】:

      最简单的方法:

      $("#mytable").find($("tr")).slice(1).remove()
      

      -首先引用表格
      -获取元素列表并对其进行切片并删除列表中的选定元素

      【讨论】:

        【解决方案10】:

        -抱歉,回复太晚了。

        我发现删除任何行(以及通过迭代的所有其他行)的最简单方法是这样

        $('#rowid','#tableid').remove();

        剩下的很简单。

        【讨论】:

          【解决方案11】:
          $("#p-items").find('tr.row-items').remove();

          【讨论】:

            【解决方案12】:

            封装在一个函数中:

            function remove_rows(tablename) { 
                $(tablename).find("tr:gt(0)").remove();        
            }
            

            然后调用它:

            remove_rows('#table1');
            remove_rows('#table2');
            

            【讨论】:

              【解决方案13】:

              这很好用

              $("#myTable tbody").children( 'tr:not(:first)' ).html("");
              

              【讨论】:

              • 是的,之前已经发布过多次了。有什么新鲜事吗?
              【解决方案14】:

              这在我的情况下以下列方式工作并且工作正常

              $("#compositeTable").find("tr:gt(1)").remove();
              

              【讨论】:

                猜你喜欢
                • 1970-01-01
                • 1970-01-01
                • 2019-06-22
                • 2020-04-14
                • 2011-03-10
                • 1970-01-01
                • 1970-01-01
                • 2011-01-16
                • 1970-01-01
                相关资源
                最近更新 更多