我有一个大约有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!
是否有任何建议来优化此代码段？
使用您的代码检查以下代码的性能：
代码：（不包括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>