Question

UPDATE: sorry my IE 9 was’nt configured well: it should’ve been set so that it accepts to use ActiveX elements. After I done that it worked very well. Sorry for the perturbation.

Question: I want to change the color of each 3rd table’s column.

Initial DOM:

  <table border="1">
    <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
    <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
    <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
  </table>

Result DOM

  <table border="1">
    <tr><td>TD #0</td><td>TD #1</td><td>-here my color changed green- TD #2</td></tr>
    <tr><td>TD #3</td><td>TD #4</td><td>-here my color changed green- TD #5</td></tr>
    <tr><td>TD #6</td><td>TD #7</td><td>-here my color changed green- TD #8</td></tr>
  </table>

in order to achieved this, i tried with a CSS-3 pseudo class:

$("tr td:nth-child(3)").css("color", "green");

it works fine in FF, Chrome .. but failed in IE 9.

What would be the corresponding Jquery filter’s expression ?

Thanks in advance

Answer 1

UPDATE: I didn’t realize you were doing this for multiple trs. This is the appropriate solution

$("tr").each(function(){
    $(this).children("td:eq(2)").css("color","red");
});

The solutions below will only work for the first tr.

The jquery selctor returns an array of dom elements, so you can always get an element directly using simple array indexing.

var elem = $("tr td")[2];
$(elem).css("color","red");

This would also work, since it’s native jQuery and doesn’t rely on css:

$("tr td:eq(2)").css("color", "red");

NOTE: Both of these techniques use 0-based indexing

http://api.jquery.com/eq-selector/