我有一张大约有5000行的大表。 我使用以下jquery片段在此表中搜索特定文本。
function searchTable(inputVal) {
var table = $('.table');
table.find('tr').each(function(index, row) {
var allCells = $(row).find('td');
if(allCells.length > 0) {
var found = false;
allCells.each(function(index, td) {
var regExp = new RegExp(inputVal, 'i');
if(regExp.test($(td).text())) {
found = true;
return false;
}
});
if(found == true) {
$(row).show();
} else {
$(row).hide();
}
}
});
}
现在这个脚本需要一些时间来执行，因为它遍历每行的每个单元格。考虑到该表连续有6个单元格，迭代总数几乎 6 * 5000 = 30000 ！ 是否有任何建议来优化此代码段？
答案 0 :(得分：3)
使用您的代码检查以下代码：
代码：（不包括jquery.js）
<!DOCTYPE>
<html>
<head>
<script src="jquery.js"></script>
<script type="text/javascript">
function searchTable(inputVal) {
$('.table').html($('.table').html().replace(RegExp(inputVal, 'g'), '<span class="showthis">' + inputVal + '<span>'));
$("tr").css('display', 'none');
$(".showthis").parent().parent().css('display', '');
}
</script>
</head>
<body>
<input id="Button1" type="button" value="button" onclick="searchTable('Text');" />
<table id="tab" class="table" border="1">
<tr>
<td>
Text
</td>
<td>
A
</td>
</tr>
<tr>
<td>
C
</td>
<td>
Text
</td>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td> ER
</td>
</tr>
<tr>
<td>
I
</td>
<td>
Text
</td>
</tr>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td>
</td>
</tr>
<tr>
<td>
I
</td>
<td>
H
</td>
</tr>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td>
</td>
</tr>
<tr>
<td>
I
</td>
<td>
H
</td>
</tr>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td>
</td>
</tr>
<tr>
<td>
I
</td>
<td>
H
</td>
</tr>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td>
</td>
</tr>
<tr>
<td>
I
</td>
<td>
H
</td>
</tr>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td>
</td>
</tr>
<tr>
<td>
I
</td>
<td>
H
</td>
</tr>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td>
</td>
</tr>
<tr>
<td>
I
</td>
<td>
H
</td>
</tr>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td>
</td>
</tr>
<tr>
<td>
I
</td>
<td>
H
</td>
</tr>
<tr>
<td>
I
</td>
<td>
Text
</td>
</tr>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td>
</td>
</tr>
<tr>
<td>
I
</td>
<td>
H
</td>
</tr>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td>
</td>
</tr>
<tr>
<td>
I
</td>
<td>
H
</td>
</tr>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td>
</td>
</tr>
<tr>
<td>
I
</td>
<td>
H
</td>
</tr>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td>
</td>
</tr>
<tr>
<td>
I
</td>
<td>
H
</td>
</tr>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td>
</td>
</tr>
<tr>
<td>
I
</td>
<td>
H
</td>
</tr>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td>
</td>
</tr>
<tr>
<td>
I
</td>
<td>
H
</td>
</tr>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td>
</td>
</tr>
<tr>
<td>
I
</td>
<td>
H
</td>
</tr>
<tr>
<td>
I
</td>
<td>
Text
</td>
</tr>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td>
</td>
</tr>
<tr>
<td>
I
</td>
<td>
H
</td>
</tr>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td>
</td>
</tr>
<tr>
<td>
I
</td>
<td>
H
</td>
</tr>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td>
</td>
</tr>
<tr>
<td>
I
</td>
<td>
H
</td>
</tr>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td>
</td>
</tr>
<tr>
<td>
I
</td>
<td>
H
</td>
</tr>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td>
</td>
</tr>
<tr>
<td>
I
</td>
<td>
H
</td>
</tr>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td>
</td>
</tr>
<tr>
<td>
I
</td>
<td>
H
</td>
</tr>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td>
</td>
</tr>
<tr>
<td>
I
</td>
<td>
H
</td>
</tr>
<tr>
<td>
I
</td>
<td>
Text
</td>
</tr>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td>
</td>
</tr>
<tr>
<td>
I
</td>
<td>
H
</td>
</tr>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td>
</td>
</tr>
<tr>
<td>
I
</td>
<td>
H
</td>
</tr>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td>
</td>
</tr>
<tr>
<td>
I
</td>
<td>
H
</td>
</tr>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td>
</td>
</tr>
<tr>
<td>
I
</td>
<td>
H
</td>
</tr>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td>
</td>
</tr>
<tr>
<td>
I
</td>
<td>
H
</td>
</tr>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td>
</td>
</tr>
<tr>
<td>
I
</td>
<td>
H
</td>
</tr>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td>
</td>
</tr>
<tr>
<td>
I
</td>
<td>
H
</td>
</tr>
<tr>
<td>
I
</td>
<td>
Text
</td>
</tr>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td>
</td>
</tr>
<tr>
<td>
I
</td>
<td>
Text
</td>
</tr>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td>
</td>
</tr>
<tr>
<td>
I
</td>
<td>
H
</td>
</tr>
<tr>
<td>
E
</td>
<td>
</td>
</tr>
<tr>
<td>
G
</td>
<td>
</td>
</tr>
</table>
</body>
</html>
答案 1 :(得分：3)
您还可以创建自定义扩展程序，如：
// jQuery expression for case-insensitive filter
$.extend($.expr[":"],
{
"contains-ci": function(elem, i, match, array)
{
return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
并像这样使用它：
$("#table tbody>tr").hide(); // hides all tr
$("#table td:contains-ci('" + value + "')").parent("tr").show(); // show tr that containt value
以下是一个正在运行的示例：http://jsfiddle.net/QvU67/
答案 2 :(得分：1)
首先，我想指出，搜索5000行不应该那么重。我还会研究可能会对性能产生影响的其他同时运行的事情。
我也不保证这一点，下面的解决方案是最优的，但是从我进行的测试中我可以看到速度增加约50％。我仍然在考虑在这里优化这段代码，我将继续更新这个代码。我还打算在一两天内从jspref做出自信的测试。
我的方法
for比jQuery的$(object).each(); jQuery的.html()使用javascript的innerHTML。如果你可以直接使用它，它会有一些性能提升。
$(function() {
var searchTest = new function () {
this.tableScope = $("#MyTable");
this.searchTable = function () {
var start = new Date().getTime();
this.tableScope.find("tr").hide();
var matches = 0;
var searchPattern = new RegExp("abc");// /A/gi;
var all_TD = document.getElementById("MyTable").getElementsByTagName("td");
for (var i = 0; i < all_TD.length; i++) {
if (searchPattern.test(all_TD[i].innerHTML)) {
all_TD[i].parentNode.style.display = '';
i += i % 5;
matches++;
}
}
var end = new Date().getTime();
$("#MyMethodClock").text(end - start + " ms to search; Matches found " + matches + " out of 5000 records");
};
}
searchTest.searchTable();
});
这是一个有效的jsFiddle