我们有一个很大的HTML表格(可能是100x100个单元格)。选择行非常快,因为我们可以简单地选择特定TR中的所有TR。但是在jQuery和nth-child的帮助下选择列要慢得多。有没有更快的列选择方法?对于每一列的伪类(比如class=" column -1",等等)呢?你对此有什么经验?
发布于 2010-12-22 00:46:24
有没有更快的列选择方法?
我建议使用被忽略的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对每列都有COLs。
这样做的好处是,COLGROUP中的COL的样式将级联到表中的所有列。例如,背景颜色。令我惊讶的是,有多少人完全不知道这个技巧,即使HTML规范可以让任何人阅读和消化。
发布于 2010-12-22 00:17:41
我个人会为每一列使用一个类。我通常的标准是:
<tr class="row row-1">
<td class="col col-1"></td>
<td class="col col-2"></td>
<td class="col col-3"></td>
</tr>发布于 2010-12-22 00:28:51
您是否尝试过直接使用DOM?
var column = new Array();
var cells;
for (row = 0; row < table.rows.length; row++) {
tr = table.rows[row];
column.push(tr.cells[1]);
};https://stackoverflow.com/questions/4501343
复制相似问题