html - JQuery 性能问题

Question

我有一个带有表格（3 列）的 html 页面，我有 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 时保留该行。另外，因为我只想要连接列的结果，所以我隐藏整个阅读栏。与读取超时复选框相同但相反，我检查读取列是否为 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);

标签： htmljquery

Answer 1

不要使用 Jquery 是最好的答案。