searching in html table
jquery
Solution
Check the following codes performance with yours:
Code:(excluding 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>
Problem
I have a large table with almost 5000 rows. I am using the following jquery snippet to search this table for a particular text. ``` 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(); } } }); } ``` Now this script is taking some time to execute because it loops through each cell of each row. Considering the table having 6 cells in a row, total number of iteration is almost 6*5000=30000! Is there any suggestion to optimize this snippet?