17

Lets say I have your basic table layout (like below). How to I grab every NTH cell? I basically want to add a css class to the cells in column N.

So if I wanted all cells in column 2, I want to have a jQuery obj that contain the following cells that are marked:

<table>
    <tr class="trow">
        <td></td>
        <td></td> <!-- included -->
        <td></td>
    </tr>
    <tr class="trow">
        <td></td>
        <td></td> <!-- included -->
        <td></td>
    </tr>
    <tr class="trow">
        <td></td>
        <td></td> <!-- included -->
        <td></td>
    </tr>
</table>
Jon Erickson
  • 107,872
  • 44
  • 134
  • 170

3 Answers3

37

Try the jQuery nth Cell selector... Must be there!

$("table tr td:nth-child(n)").addClass("MyGreatClass");
RSolberg
  • 26,555
  • 23
  • 115
  • 159
5

nth Selector

$('table>tbody>tr>td:nth-child(2)').addClass('someClass');
redsquare
  • 77,122
  • 20
  • 149
  • 156
0

There are many ways to do this. The best way depends on how the table is generated and what you will be doing with the cells in javascript/JQuery.

You could add an id to each cell, something like "cell-row-col". This allows you to grab any cell via document.getElementByID().

Chris Judge
  • 1,884
  • 1
  • 13
  • 10