使用 jQuery 快速选择表格列答案

【问题标题】：Fast selection of table columns with jQuery使用 jQuery 快速选择表格列
【发布时间】：2011-05-28 22:20:57
【问题描述】：

我们有一个很大的 HTML 表格（可能是 100x100 单元格）。选择行非常快，因为我们可以简单地选择特定 TR 中的所有 TD。但是在 jQuery 和 nth-child 的帮助下选择列要慢得多。列选择有更快的替代方法吗？每一列的伪类如何（如 class="column-1" 等）？您对此有何经验？

【问题讨论】：

我认为您的解决方案很好，只是要注意您的 Html 文件会更重。您会因失去 Html 渲染而获得 javascript 性能。

标签： javascript jquery html optimization html-table

【解决方案1】：

有没有更快的列选择方法？

我会推荐使用被忽视的COLGROUP/COL 标签，按照最初的 W3C HTML 规范。将此代码复制并粘贴到一个虚拟 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 规范已经存在，任何人都可以阅读和消化。

【讨论】：

是否可以在 cols 上添加 jquery mouseevents。我试过了，但似乎没有用。
您可以定位它们，但大多数表格事件将从单元格触发。我仅将 COL/COLGROUP 用于显示目的（例如，“排序”列的背景阴影）。另一个有用的事情是应用宽度。具有宽度的 COL 会将其宽度级联到 THEAD/TBODY/TFOOT 列，前提是包含的单元格上没有任何宽度可能会覆盖它们。在上面的示例中，尝试将width: 50%; 添加到第一个 COL 标记的样式声明中。

【解决方案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>

【讨论】：

有时我将类添加到其他与表格无关的元素中以模拟表格行为。
但是 $("td .col-2") 真的会比 $("td:nth-child(2)") 快吗？我有点怀疑。有人有一些基准吗？
我唯一能找到的关于使用 nth-child 的缺点。 “nth-child 是那些相当不幸的 CSS 属性之一，它几乎完全跨浏览器兼容性，除了 IE 中的完全零支持，甚至 IE 8。”来源：css-tricks.com/how-nth-child-works

【解决方案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]);
};

【讨论】：

【解决方案4】：

http://www.jsfiddle.net/gaby/GWqtB/4/ 对我来说工作得非常快（对于 100cols x 300rows）

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

【讨论】：