Add class for the column in the html table using jQuery

Question

Please tell me how to add my class for the column in the table (all the cells of the selected column) using jQuery?

For example, I need a column №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 :(

I want

<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

You can use CSS :nth-child() selector to add rules, no need use 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> 

Answer 2

You can use :nth-child() selector:

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

The nth-child will allow you to select the desired column by specifying the column number. Also, you need to include JQuery plugin in your HTML file.

  $('#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

You could do with each() function. And change the :eq(1) instead of .eq(1) .its a wrong jquery object

$('#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

You can also do like this using Jquery... It will work for your code... which selects element td which comes after another td...

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

for specific selection... use nth child...

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