Question

我有以下代码，切换（显示或隐藏）大量表格单元格，要隐藏的单元格基于复选框的位置（每TH一个复选框）

    $('.selector input:checkbox').on('change', function () {

        var $checkbox = $(this);
        var index = $('.selector input:checkbox').index($checkbox) + 1;
        var selector = 'tr td:nth-child(' + index + '), tr th:nth-child(' + index + ')';
        $table.find(selector).toggle({
            showOrHide: $checkbox.is(':checked')
        });

    });

我注意到复选框的点击/更改有明显的延迟。我有更有效的方法吗？

Answer 1

如果您尝试显示或隐藏列，可以考虑使用colgroup元素，然后通过添加或删除类值来隐藏或显示colgroup。此外，您可以修改CSS规则以显示或隐藏第n个子单元格，而不是使用选择器来查找它们并单独隐藏/显示它们（即使用CSS而不是jQuery）。

这是一个使用普通js的示例，它只是显示了这个概念，有很多方法可以实现它。我相信你可以将它转换成适合任何图书馆的套装。切换类的实际代码是单行，其余的是用于支持它的简单函数的库代码。

// Function to hide or show a column
function toggleColumn(element, idx) {
  toggleClass(document.getElementById('cg' + idx), 'hidden');
}

// Remove leading and trailing spaces, Replace multiple spaces with single
function trim(s) {
  return s.replace(/^\s+|\s+$/g,'').replace(/\s+/g,' ');
}

// Return true if element has className, otherwise false
function hasClass(element, className) {
    return (' ' + element.className + ' ').indexOf(' ' + className + ' ') > -1;
}

// Add className to element if it doesn't already have it
function addClass(element, className) {
  if (!hasClass(element, className))
    element.className = trim(element.className + ' ' + className);
}

// Remove className if element has it
function removeClass(element, className)
  if (hasClass(element, className))
    element.className = trim((' ' + element.className + ' ').replace( ' ' + className + ' ',' '));
}

// If element has className, remove it, otherwise, add it
function toggleClass(element, className) {
  hasClass(element, className)? removeClass(element, className) :
                                addClass(element, className);
}

一些相关的CSS：

<style type="text/css">
  .hidden {
    visibility: hidden;
  }
</style>

还有一些加价：

<table>
  <colgroup id="cg0" span="1"></colgroup>
  <colgroup id="cg1" span="1"></colgroup>
  <colgroup id="cg2" span="1"></colgroup>
  <colgroup id="cg3" span="1"></colgroup>
  <tr>
    <th><input type="checkbox" onclick="toggleColumn(this, 1)">
    <th>Column 1
    <th><input type="checkbox" onclick="toggleColumn(this, 3)">
    <th>Column 2
  <tr>
    <td>&nbsp;<td>1<td>&nbsp;<td>2
  <tr>
    <td>&nbsp;<td>1<td>&nbsp;<td>2
  <tr>
    <td>&nbsp;<td>1<td>&nbsp;<td>2
</tables>

如何在切换大量列时提高JQuery性能？

1 个答案: