如何获取具有特定类的列号，并使用它来迭代表
如何获取具有特定类的列号，并使用它来迭代表
提问于 2016-04-15 13:28:54
我在thead部分中有一个带有标头的表。
我需要将类colourme添加到具有表头类selectme的所有表tds中。只有第一个标头有这个类，所以我需要以特定的类获取列号，并使用类colourme填充列下面相同列号的行。
这是我的代码：
<html>
<head>
<style>
td, th {
border: solid 1px black;
}
</style>
<body>
<table id="mytable" >
<thead>
<tr>
<th rowspan="3">Person</th>
<th>Day 1</th>
<th>Day 2</th>
<th>Day 3</th>
<th class="selectme">Day 4</th>
<th class="selectme">Day 5</th>
<th>Day 6</th>
<th>Day 7</th>
</tr>
<tr>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Sun</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>John</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>Paul</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total:</th>
<th>4</th>
<th>4</th>
<th>4</th>
<th>4</th>
<th>4</th>
<th>4</th>
<th>4</th>
</tr>
</tfoot>
</table>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2016-04-15 13:36:25
您可以循环遍历selectme并使用nth-child选择主体元素。
$('#mytable thead .selectme').each(function(i) {
$('#mytable tbody td:nth-child(' + ($(this).index() + 1) + ')').addClass('colourme')
})td,
th {
border: solid 1px black;
}
.selectme,
.colourme {
color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
<thead>
<tr>
<th rowspan="3">Person</th>
<th>Day 1</th>
<th>Day 2</th>
<th>Day 3</th>
<th class="selectme">Day 4</th>
<th class="selectme">Day 5</th>
<th>Day 6</th>
<th>Day 7</th>
</tr>
<tr>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Sun</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>John</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>Paul</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total:</th>
<th>4</th>
<th>4</th>
<th>4</th>
<th>4</th>
<th>4</th>
<th>4</th>
<th>4</th>
</tr>
</tfoot>
</table>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36648524
复制相关文章
相似问题
腾讯云开发者
