Question

I am looking to select the last td in each row and using this css selector right now .table td:last-child but it doesnt work in IE so is there any way I can select through javascript (WITHOUT ANY FRAMEWORK) for IE? to apply CSS styles.

Answer 1

var rows = document.getElementById('tester').rows;

for(var i = 0, len = rows.length; i < len; i++) {
    rows[ i ].lastChild.style.background = 'orange';
}

Example: http://jsfiddle.net/JsyYR/

---

EDIT: If you’ll be running this in all browsers, it may be safer to do this:

var rows = document.getElementById('tester').rows;

for(var i = 0, len = rows.length; i < len; i++) {
    rows[ i ].cells[ rows[ i ].cells.length - 1 ].style.background = 'orange';
}

Example: http://jsfiddle.net/JsyYR/2/

This is because some browsers will insert a text node if there’s any space between the last </td> and the closing </tr>. As such, lastChild wouldn’t work.