客户端表过滤

Question

正如标题所述。我使用jQuery来完成这个魔术。我用一个自定义Contains扩展，选择如下：

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

我在interwebs发现。它工作正常。我使用它在结合以下：

$("#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超级忍者技能不如下一个开发人员那么出色，因此我想知道是否有更好的方法来做到这一点？

Answer 1

一个建议是重新使用共同的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(); } 
}); 

Answer 2

你有没有考虑提炼自定义选择（见下）

How do I determine an HTML input element type upon an event using jQuery?

What useful custom jQuery selectors have you written?

var $item = jQuery(a); 
return ($item.attr("type") == "input") && 
     $item.text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 

Answer 3

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

尽管标准的CSS选择器可以让你在具有querySelectorAll的新浏览器中利用浏览器的快速CSS匹配实现，但自定义jQuery选择器总是会变得很慢。我建议如果你遇到速度问题，你最好将自己的代码编写成明确的JavaScript代码，而不是将它锁在选择器中。

使用显式匹配代码也意味着你可以丢失字符串连接的丑陋到选择器Contains('" + forenameVal + "')，当输入名称中存在特殊字符（如'）时将出错。 '经常以现实世界的名字出现。

例如。 （未经测试）：

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'; 
} 

注意这依赖于具有单个文本子节点，从获得data每个名称细胞。如果情况并非如此（名称单元格可能包含其他内容，或者根本没有内容，甚至不包括空格），您必须改用$(row.cells[0]).text()，但这样做也会变慢。

它也依赖一个className来隐藏关键字（您会在样式表中放置.hidden { display: none; }）以避免隐藏表格行时遇到的一些困难。你可以把它变成if (...) $(row).show(); else $(row).hide();，但这也让jQuery做了更多的工作。