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.

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.

• javascript

Share Improve this question Follow asked Nov 15, 2010 at 15:00 ShishantShishant 9,2941515 gold badges5959 silver badges8282 bronze badges 4

• 2 1) IE sux. 2) Use jquery – Mikhail Commented Nov 15, 2010 at 15:04
• 2 Yes -- you can reimplement what every framework that supports this type of selection does to choose elements that are a last child. It's probably not a whole lot of code to do this, but really, why? Just choose a good framework and go with it. – tvanfosson Commented Nov 15, 2010 at 15:04
• 1 Both last-child and first-child should work for IE7 and up. – Evan Mulawski Commented Nov 15, 2010 at 15:05
• 3 In my view you shouldn't include a plete framework if all you need is a very small subset of the functionality. – Coin_op Commented Nov 15, 2010 at 15:09

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

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/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/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.

To do this in JavaScript you need something like:

var tableRows = document.getElementById('tableid').childNodes
var tableCells = tableRows[tableRows.length - 1].childNodes;
var lastCell = tableCells[tableCells.length - 1];

This assumes the table is of the format with nothing between those tags. No tbody or such.

Alternatively you could simply use getElementByTagName('td') and get the last element of the returned array. The downside of this is that it won't work for a page with more than one table.

Whether you could or not should be moot. Of course you could because Javascript frameworks can do this.

Whether you should spend the time reinventing the wheel when you could just add a small dependency on a JS library, should be the question.

In Javascript, you can reference .lastChild on any DOM object, but you would have to get the elements first, so without jQuery or similar, it's not as easy as it sounds.

The obvious answer is "Use JQuery". You have specified against this (ie "without any framework"), but it is by far the most obvious solution.

Another solution is Dean Edwards' IE7.js (and related IE8.js and IE9.js) which is a Javascript include that attempts to patch old versions of IE to be more patible with standard CSS, etc. I believe it fixes :last-child selector. But again, it is a third-party library so you may not want to use it.

You could, of course, just add an additional class to the elements that you want the last child styles to apply to, and then just reference that in your CSS instead of last-child. Not ideal given that last-child is specifically aimed at avoiding you having to do that, but it does give you guaranteed patibility.