有没有一种使用jQuery快速删除表行的方法

我有一个50多行11列的表格。每行都有一个唯一的

id

，由

id=“row\uu rownumber”

组成。第二列中有一个复选框，带有

id=“group\uuuuuuuurowNumber”

当用户单击复选框时，我希望删除除属于所选客户端的任何行之外的所有行。我的代码如下所示：

var sClient = $(this).attr("id").substring(6); // trim off group_
sClient = sClient.substring(0,sClient.indexOf("_")); // trim off anything after clientid
$("tr[id^=row_]").not("tr[id^=row_" + sClient + "]").remove(); 

问题是它花费的时间太长，以至于在IE中我收到了“脚本花费的时间太长”的警告

是否有更快的方法删除多行

顺便说一句：使用jQuery1.4.3需要4.4秒，使用jQuery1.4.2需要1.3秒

多亏了大家，问题解决了。@VisusZhao提供的最后提示。这是最后一个工作片段：

var KeepRows = $("#bookingstable tbody tr[id^=row_" + sClient + "_]");
$("#bookingstable tbody").empty();
$("#bookingstable tbody").append(KeepRows);

---

谢谢大家

首先，给桌子一个id。

<table id="departures">

这样，jQuery就不必每次执行函数时都遍历DOM，因为它将存储在对象中

然后像往常一样使用代码

var sClient = $(this).attr("id").substring(6); // trim off group_
sClient = sClient.substring(0,sClient.indexOf("_")); // trim off _row

将最后一行替换为该行时

$rows.not("tr[id^=row_" + sClient + "]", $departures).remove();

---

我想您可以尝试使用

.filter

来代替，如下所示：

var sClient = this.id.substring(6); // trim off group_

$("#table_id tr").filter(function(){
    return (this.id.indexOf('row') === 0 && this.id !== sClient);
}).remove();

或者，为属于每个客户机的行指定一个类：

var sClient = this.id.substring(6); // trim off group_
$('#table tr.' + sClient).remove();

---

这两种方法都不能保证更快，不像上面提到的，但它们是实现这一点的不同方法，对于IE来说可能更快。

明确标识您的表并将其用作jQuery上下文。还可以存储表jQuery对象——尽管您可能不会从中看到太多改进。我可以尝试将一个类应用于您的每一行。例如，为每一行指定它们所属的客户机类。那么，这应该可以做到：

var tableElement = $("#table_id"); // only do this once on page load
tableElement.find("tr:not(." + sClient + ")").hide();

---

不保证这会更快，但可能值得一试。

您可以先为客户端存储行

var clientRow = $('#row_' + sClient);

然后清空桌子

$('#table_id tbody').empty();

然后将行插回

$('#table_id tbody').append(clientRow);

---

这将不进行循环，因此其恒定时间将从向表中添加ID开始：

<table id="alldepartures">

这是可以的，因为同一个类可以有多行

然后在代码中：

var sClient = $(this).attr("id").split('_')[1];
//remove all rows that don't have this class
$('#alldepartures').find('tr[class!=client_' + sClient + ']').remove();

---

我认为其他代码可能会受到影响，特别是在IE中，因为jQuery必须在IE中做额外的工作来克服错误的getElementById（ID）实现。您确定这就是导致延迟的原因吗？对于大约50行，这应该不会花费太长的时间。我怀疑获取客户机字符串的代码是否慢，但这可能会更简洁一些：

var sClient=$（this.attr（“id”）.split（“”“）[1]按下划线拆分字符串，然后获取中间位。请尝试使用：not（）选择器或重复使用
id
属性吗？这不是有效的HTML，尽管我不认为使用
class
会对性能产生影响。感谢您以更简洁的方式找到clientid@scunliffe，这是一种享受。但是没有提高速度。谢谢@marko，这很有道理，但对速度没有影响。可能是因为页面的DOM是由表控制的，页面顶部的按钮只有几个div。现在正在测试。行已保存，表已清除，但
.append
没有追加任何内容。不知道为什么。仍在调查中。我还不知道如何将JSFIDLE嵌入到页面中，因此您必须查看链接以查看结果谢谢@VisusZhao您的
JSFIDLE
链接为我指明了正确的方向。我没有包括
tbody
或表id。现在工作速度很快，我不需要“请稍候”消息。它与jQuery1.4.3配合使用。谢谢所有回复者，不抱歉@YiJiang，同样的结果。
  <tr class="client_123">

var sClient = $(this).attr("id").split('_')[1];
//remove all rows that don't have this class
$('#alldepartures').find('tr[class!=client_' + sClient + ']').remove();