javascript - 我怎样才能仅根据标题行应用一些 jquery 东西

Question

我有这样的表:

<table> 
<thead>
   <th>id </th><th>name </th><th>number </th><th>result </th> 
</thead>        
<tbody>
<tr>
 <td>stuff</td>
 <td>stuff</td>
 <td>stuff</td>
 <td>stuff</td> 
</tr>
</tbody>
 </table>

我只想将 class = "red" 添加到 header 为 result 的那些 td

因此只有在页面加载时才使用 jquery 动态显示结果列。

Answer 1

您可以使用 .index() 获取 header 的索引然后使用 :nth-child selector 应用该类.

jsFiddle

var resultHeaderIndex = $('th:contains("result")').index();
$('td:nth-child(' + (resultHeaderIndex + 1) + ')').addClass('red')

---

如果您还想将类添加到标题中，那么您可以在获取索引之前简单地添加它:

jsFiddle

var resultHeaderIndex = $('th:contains("result")')
    .addClass('red')
    .index();
$('td:nth-child(' + (resultHeaderIndex + 1) + ')').addClass('red')