使用jQuery快速选择表列

Question

我们有一个大的HTML表（可能是100x100个单元格）。 选择行非常快，因为我们可以简单地选择特定TR中的所有TD。 但是在jQuery和nth-child的帮助下选择列要慢得多。 是否有更快的色谱柱选择方案？ 每列的伪类怎么样（比如class =“column-1”，等等）？ 你有什么经历？

Answer 1

是否有更快的色谱柱选择方案？

根据原始的W3C HTML规范，我建议使用被忽略的COLGROUP / COL标签。 将此代码复制并粘贴到虚拟HTML页面中，亲身体验COLGROUP的神奇之处！

<table id="mytable">
  <caption>Legend</caption>
  <colgroup>
    <col style="background-color: #f00;"/>
    <col/>
    <col/>
  </colgroup>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>cell 1,1</td>
      <td>cell 1,2</td>
      <td>cell 1,3</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>footer 1,1</td>
      <td>footer 1,2</td>
      <td>footer 1,3</td>
    </tr>
  </tbody>
</table> 

TFOOT标签在 TBODY标签之前 。 COLGROUP每列都有COL。

这样做的好处是，COLGROUP中COL的样式将级联到表中的所有列。 例如，背景颜色。 我永远不会惊讶于有多少人完全不知道这个技巧，即使HTML规范是为了让任何人阅读和消化。

Answer 2

我个人会为每一列使用一个类。 我通常的标准是这样的：

<tr class="row row-1">
<td class="col col-1"></td>
<td class="col col-2"></td>
<td class="col col-3"></td>
</tr>

Answer 3

您是否尝试过直接使用DOM？

var column = new Array();
var cells;

for (row = 0; row < table.rows.length; row++) {
  tr = table.rows[row];
  column.push(tr.cells[1]);
};

Answer 4

在http://www.jsfiddle.net/gaby/GWqtB/4/ （ 对于100cols x 300rows ），它的工作速度非常快

你能提供一个例子，我们可以看到你的实施速度吗？
可能是延迟是代码的其他部分吗？ 喜欢选择时的造型..