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

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

例子:

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

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

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