使用jQuery为html表中的列添加类答案

【问题标题】：Add class for the column in the html table using jQuery使用jQuery为html表中的列添加类
【发布时间】：2017-09-05 01:23:54
【问题描述】：

请告诉我如何使用 jQuery 为表格中的列（所选列的所有单元格）添加我的类？

例如，我需要一列№2

<table id = 'mytable'>
<tbody>
<tr><td></td>...<td></td></tr>
...
<tr><td></td>...<td></td></tr>
</tbody>
</table>

$('#mytable td.eq( 1 )').addClass('myclass'); // set class for only one cell :(

我想要

<table id = 'mytable'>
<tbody>
<tr><td></td><td class = 'myclass'></td>...<td></td></tr>
...
<tr><td></td><td class = 'myclass'></td>...<td></td></tr>
</tbody>
</table>

【问题讨论】：

标签： javascript jquery html html-table

【解决方案1】：

您可以使用CSS :nth-child()选择器添加规则，无需使用jquery

#mytable td:nth-child(2) {
  color: red;
}

<table id='mytable'>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案2】：

你可以使用:nth-child()选择器：

 $('#mytable tr td:nth-child(2)').addClass('myClass');

nth-child 将允许您通过指定列号来选择所需的列。此外，您需要在 HTML 文件中包含 JQuery 插件。

 $('#mytable tr td:nth-child(2)').addClass('myClass');

td:nth-child(2) {
    color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table id="mytable">
    <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
    </tr>
    <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
    </tr>
    <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
    </tr>
    <tr>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
    </tr>
    <tr>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
    </tr>
    <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
    </tr>
    <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
    </tr>
</table>

【讨论】：

【解决方案3】：

您可以使用each() 函数。并更改:eq(1) 而不是.eq(1)。它是一个错误的jquery 对象

$('#mytable tbody tr').each(function(){
$(this).find('td:eq(1)').addClass('myclass');
})

【讨论】：

【解决方案4】：

$('#mytable td:nth-of-type(2)').addClass('myclass');

.myclass {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table id='mytable'>
  <tbody>
    <tr>
      <td>first</td>
      <td>second</td>
      <td>thirth</td>
    </tr>
    <tr>
      <td>first</td>
      <td>second</td>
      <td>thirth</td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案5】：

您也可以使用 Jquery 来执行此操作...它适用于您的代码...它选择元素 td，它位于另一个 td 之后...

$('#mytable tr td~td').addClass('myClass');

对于特定的选择...使用第 n 个孩子...

$('#mytable tr td:nth-child(2)').addClass('myClass');

【讨论】：