Jquery 客户端表筛选

正如标题所述。我正在使用jQuery来实现这个神奇的功能。我使用了一个自定义的

包含对选择器的扩展，如下所示：

jQuery.expr[':'].Contains = function(a, i, m) {
   return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};

我在互联网上找到的。它很好用。我将它与以下内容结合使用：

$("#txtSurname, #txtForename").keyup(function() {
    var forenameVal = $("#txtForename").val();
    var surnameVal = $("#txtSurname").val();
    $("#tblEmployees tr").show();
    if (forenameVal.length > 0) { $("#tblEmployees tr td:nth-child(1):not(:Contains('" + forenameVal + "'))").parent().hide(); }
    if (surnameVal.length > 0) { $("#tblEmployees tr td:nth-child(2):not(:Contains('" + surnameVal + "'))").parent().hide(); }
});

然而，这是非常低效的，对于一个500行的表来说，它非常困难。在编写高效选择器方面，我的jQuery uber ninja技能不如下一个开发人员出色，因此我想知道是否有更好的方法来实现这一点？
一个建议是重用通用jQuery对象，这将减少开销：

$("#txtSurname, #txtForename").keyup(function() {
    var forenameVal = $("#txtForename").val();
    var surnameVal = $("#txtSurname").val();
    var  t = $("#tblEmployees tr");
    t.show();
    if (forenameVal.length > 0) { t.find("td:nth-child(1):not(:Contains('" + forenameVal + "'))").parent().hide(); }
    if (surnameVal.length > 0) { t.find("td:nth-child(2):not(:Contains('" + surnameVal + "'))").parent().hide(); }
});

您是否考虑过改进自定义选择器（请参见以下内容）



这是jQuery很难匹配的选择器。你要求它做很多不必要的工作

标准CSS选择器可以让您在具有
querySelectorAll
的较新浏览器中利用浏览器的快速CSS匹配实现，而定制的jQuery选择器总是很慢。我建议，如果您遇到速度问题，您最好自己将匹配代码编写为显式JavaScript，而不是将其硬塞进选择器中

使用显式匹配代码还意味着您可能会失去字符串连接到选择器
Contains（“+forenameVal+”）
中的丑陋性，当输入名称中出现特殊字符（如
”
时，这将出错<代码>“

经常以真实世界的名称出现

例如（未经测试）：

注意：这依赖于每个名称单元都有一个文本节点子节点来获取数据。如果情况并非如此（名称单元格可能包含其他内容，或者根本不包含任何内容，甚至不包含空格），则必须改用

$（row.cells[0]）.text（）

，但速度也会较慢

---

它还依赖于一个类名来设置hiddenness键（您将

.hidden{display:none；}

放在样式表中），以避免隐藏表行的一些困难。您可以将其转换为

if（…）$（row.show（）；else$（行）.hide（）但这同样会让jQuery做更多的工作。
尽管这个建议很有意义，但仍然非常慢。您是否尝试过去掉“：not（：Contains）”选择器，看看瓶颈是否在哪里？
var $item = jQuery(a);
return ($item.attr("type") == "input") &&
        $item.text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;

var forenameVal= $('#txtForename').val().toUpperCase();
var surnameVal= $('#txtSurname').val().toUpperCase();
var table= document.getElementById('table');
for (var i= table.rows.length; i-->0;) {
    var row= table.rows[i];
    row.className= (
        row.cells[0].firstChild.data.toUpperCase().indexOf(forenameVal)!==-1 &&
        row.cells[1].firstChild.data.toUpperCase().indexOf(surnameVal)!==-1
    )? '' : 'hidden';
}