Question

请告诉我如何使用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>

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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>

Answer 3

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

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

Answer 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>

Answer 5

你也可以使用Jquery这样做...它适用于你的代码...它选择了另一个td之后的元素td ...

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

具体选择......使用第n个孩子......

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

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

5 个答案: