首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >使用jQuery快速选择表列

使用jQuery快速选择表列
EN

Stack Overflow用户
提问于 2010-12-22 00:13:27
回答 4查看 1.5K关注 0票数 5

我们有一个很大的HTML表格(可能是100x100个单元格)。选择行非常快,因为我们可以简单地选择特定TR中的所有TR。但是在jQuery和nth-child的帮助下选择列要慢得多。有没有更快的列选择方法?对于每一列的伪类(比如class=" column -1",等等)呢?你对此有什么经验?

EN

回答 4

Stack Overflow用户

发布于 2010-12-22 00:46:24

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

我建议使用被忽略的COLGROUP/COL标记,就像最初的W3C HTML规范一样。将这段代码复制并粘贴到一个虚拟的HTML页面中,亲眼看看COLGROUP的魔力!

代码语言:javascript
复制
<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对每列都有COLs。

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

票数 2
EN

Stack Overflow用户

发布于 2010-12-22 00:17:41

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

代码语言:javascript
复制
<tr class="row row-1">
<td class="col col-1"></td>
<td class="col col-2"></td>
<td class="col col-3"></td>
</tr>
票数 0
EN

Stack Overflow用户

发布于 2010-12-22 00:28:51

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

代码语言:javascript
复制
var column = new Array();
var cells;

for (row = 0; row < table.rows.length; row++) {
  tr = table.rows[row];
  column.push(tr.cells[1]);
};
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/4501343

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档