I have an html page with a table (3 columns) and I have 2 checkboxes, the table has more that 1000 rows...
Those are the checkboxes:
<label><input type="checkbox" id="ctimeout" name="ctimeout" value="TRUE"><span>Connect Timeout</span></label>
<label><input type="checkbox" id="rtimeout" name="rtimeout" value="TRUE"><span>Read Timeout</span></label>
When I click on the checkbox Connect Timeout I will search in the connect column and if the value is larger that 0 I hide that row and only keep the row if the value is 0. Also since I only want the results from connect column I hide whole read column. The same thing with the Read Timeout checkbox but reverse, I check the read column for 0 and I hide the whole connect column.
<table id=totable>
<tr>
<th>service></th>
<th class="ct">connect></th>
<th class="rt">read></th>
</tr>
<tr>
<td>service1</td>
<td class="ct">0</td>
<td class="rt">10</td>
</tr>
<tr>
<td>service2</td>
<td class="ct">2</td>
<td class="rt">0</td>
</tr>
</table>
I'm using JQuery to do all this, the script works as expected but there is a performance issue especially with firefox. Is there a better way to do what I do and minimize the performance degradation.
My JQuery code:
(function($) {
$(function() { $("#rtimeout").click (
function() {
_this = this;
// Show only matching TR, hide rest of them
if($(this).is(":checked")){
$.each($("table#totable td"), function() {
if (($(this).text() > 0 ))
$(this).parent().hide();
$('table#totable td.ct:nth-child(2),th.ct:nth-child(2)').hide();
});}
else if (!$(this).is(":checked")){
$.each($("table#totable td"), function() {
$(this).parent().show();
$('table#totable td.ct:nth-child(2),th.ct:nth-child(2)').show();
})
};
});
$("#ctimeout").click (
function() {
_this = this;
// Show only matching TR, hide rest of them
if($(this).is(":checked")){
$.each($("table#totable td"), function() {
if (($(this).text() > 0 ))
$(this).parent().hide();
$('table#totable td.rt:nth-child(3),th.rt:nth-child(3)').hide();
});}
else if (!$(this).is(":checked")){
$.each($("table#totable td"), function() {
$(this).parent().show();
$('table#totable td.rt:nth-child(3),th.rt:nth-child(3)').show();
})
};
});}
);// end of document ready
})(jQuery);