Question

我有一个包含超过400行和约90列的表。列的可见性应该是动态的。我已经为每个单元格分配了一个css类.column（x），其中（x）是列的索引/计数。现在我可以通过两种方式改变可见性：

$('.column5').css('display','block');

但是这必须循环超过400个单元格并且可能在每次迭代时重新渲染html（？）。另一种方法是：

$('.style').html().replace('.column5{display:none}','.column5{display:block}');

其中

<style class='style'>
 .column1{display:none}
 .column2{display:none}
 .column3{display:none}
 .column4{display:none}
 .column5{display:none}
 ...
</style>

我现在正在使用第一种方法，但是如果有这么多细胞需要改变，它自然会很慢。问题是：使用第二种方法可以获得任何性能提升吗？它是否有意义/这是一种不好的做法吗？提前谢谢！

Answer 1

我也不会这样做。相反，我在CSS中有这样的规则：

.hide-column5 .column5 {
    display: none;
}

...然后切换单元格容器上的hide-column5类（例如table或tbody）。

示例：

＆＃13;

$("input[type=checkbox]").on("click", function() {
    var cls = this.getAttribute("data-cls");
    $("table").toggleClass(cls, !this.checked);
});

＆＃13;

.hide-column1 .column1 {
  display: none;
}
.hide-column2 .column2 {
  display: none;
}
.hide-column3 .column3 {
  display: none;
}

＆＃13;

<table>
  <thead>
    <tr>
      <th class="column1">Col 1</th>
      <th class="column2">Col 2</th>
      <th class="column3">Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="column1">1</td>
      <td class="column2">2</td>
      <td class="column3">3</td>
    </tr>
    <tr>
      <td class="column1">1</td>
      <td class="column2">2</td>
      <td class="column3">3</td>
    </tr>
    <tr>
      <td class="column1">1</td>
      <td class="column2">2</td>
      <td class="column3">3</td>
    </tr>
  </tbody>
</table>
<div>
  <label>
    <input checked type="checkbox" data-cls="hide-column1"> Show 1
  </label>
</div>
<div>
  <label>
    <input checked type="checkbox" data-cls="hide-column2"> Show 2
  </label>
</div>
<div>
  <label>
    <input checked type="checkbox" data-cls="hide-column3"> Show 3
  </label>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

更改CSS类声明或实际将样式应用于每个元素？

1 个答案: