JQuery性能问题

Question

我有一个html页面与表(3列)，我有2个复选框，表有超过1000行…

这些是复选框:

<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>

当我单击复选框连接超时时，我将在连接列中搜索，如果值大于0，我将隐藏该行，仅在值为0时保留该行。也因为我只想要连接列的结果，我隐藏了整个读列。与Read Timeout复选框相同，但相反，我将Read列检查为0，并隐藏整个连接列。

<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>

我使用JQuery做这一切，脚本工作如预期，但有一个性能问题，特别是与firefox。有没有更好的方法来做我所做的，并尽量减少性能下降。

我的JQuery代码:

(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);

Answer 1

不使用Jquery是最好的答案。