Javascript 使用jQuery快速选择表列

我们有一个很大的HTML表（可能是100x100个单元格）。选择行非常快，因为我们可以简单地选择特定TR中的所有TDs。但是在jQuery和

nth child

的帮助下选择列要慢得多。是否有更快的列选择方法？每个列的伪类如何（比如class=“column-1”，等等）？您对此有何经验？

我个人会为每个专栏使用一个类。我通常的标准是：

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

---

您是否尝试过直接使用DOM

var column = new Array();
var cells;

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

var column=new Array（）；
var细胞；
对于（行=0；行

在（100列x 300列）时，它对我来说运行非常快

您能否提供一个示例，以便我们了解您的实施速度？
可能是代码的其他部分有延迟吗？喜欢在选择时设置样式

是否有更快的列选择方法

我建议按照原始的W3CHTML规范使用被忽略的标记。复制并粘贴此代码到一个虚拟HTML页面中，然后亲自体验COLGROUPs的魔力

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

传奇
第1栏
第2栏
第3栏
细胞1,1
单元格1,2
细胞1,3
页脚1,1
页脚1,2
页脚1,3

TFOOT标记在TBODY标记之前。COLGROUPs为每个列指定col

---

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

row

和

col

是多余的，因为你可以简单地使用

tr

和

td

（即，会有

td.row

？）有时我会将类添加到其他与表无关的元素中以模拟表的行为。但是$（“td.col-2”）真的会比$（“td:nth child（2）”快吗？我有点怀疑。有人有一些基准吗？关于使用第n个孩子的缺点，我唯一能找到的。“nth child是一个非常不幸的CSS属性，它几乎完全处于跨浏览器兼容性之间，除了IE中完全没有支持，甚至IE 8。”src：我认为你的解决方案很好，只是要知道你的Html文件会更重。由于Html呈现中的缺失，javascript性能有所提高。是否可以在cols上添加jquery mouseevents。我试过了，但似乎不起作用。您可以将它们作为目标，但大多数表事件都将由单元格触发。我仅将COL/COLGROUPs用于显示目的（例如，“排序”列的背景阴影）。另一个有用的方法是应用宽度。如果包含宽度的col的单元格上没有任何宽度可以覆盖它们，则它们的宽度将级联到THEAD/TBODY/TFOOT列。在上面的例子中，尝试添加

width:50%

到第一个COL标记的样式声明。