CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-table
Zhihar
Zhihar

Reputation: 1428

Add class for the column in the html table using jQuery

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>

Upvotes: 1

Views: 3813

Answers (5)

Tomonso Ejang
Tomonso Ejang

Reputation: 1366

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

Upvotes: 1

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

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>

Upvotes: 3

Nick De Jaeger
Nick De Jaeger

Reputation: 1249

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

Upvotes: 1

Satpal
Satpal

Reputation: 133403

You can use CSS :nth-child() selector to add rules, no need use 

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

Upvotes: 6

prasanth
prasanth

Reputation: 22490

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

Upvotes: 1

Related Questions