社区首页 >问答首页 >如何获取具有特定类的列号，并使用它来迭代表

问如何获取具有特定类的列号，并使用它来迭代表
EN

Stack Overflow用户

提问于 2016-04-15 05:28:54

回答 1查看 28关注 0票数 1

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

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-04-15 05: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>