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')

---

如果您也想将类添加到 header ，那么您只需在获取索引之前添加它即可:

jsFiddle

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