CSS：在JavaScript中的最后一个子选择器？

我期待选择最后td在每一行中，并使用此css选择器现在.table td:last-child，但它不工作在IE浏览器，所以有什么办法，我可以通过JavaScript选择（没有任何框架）为IE浏览器？应用CSS样式。CSS：在JavaScript中的最后一个子选择器？

来源

2010-11-15 Shishant

1）IE sux。 2）使用jquery – Mikhail 2010-11-15 15:04:04

是的 - 你可以重新实现支持这种类型选择的每个框架是否选择最后一个孩子的元素。这可能不是一大堆代码，但是真的，为什么？只要选择一个好的框架，并与它一起去。 – tvanfosson 2010-11-15 15:04:28

'最后一个孩子'和'第一个孩子'都应该适用于IE7及更高版本。 – 2010-11-15 15:05:38

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

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

例子：http://jsfiddle.net/JsyYR/

编辑：如果你在所有浏览器上运行这一点，它可能会更安全做到这一点：

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

例如：http://jsfiddle.net/JsyYR/2/

这是因为如果最后的</td>和关闭</tr>之间有任何空格，某些浏览器将插入文本节点。因此，lastChild将无法正常工作。

来源

2010-11-15 15:07:13 user113716

无论你是否应该是没有意义的。当然你可能，因为JavaScript框架可以做到这一点。

无论你是否应该花时间重新发明轮子，只要在JS库上添加一个小的依赖关系，应该是个问题。

来源

2010-11-15 15:05:44 Oli

这也是一个评论，而不是一个答案。 – 2010-11-15 15:06:20

不是。有效的答案有时包括“不要重新发明轮子，你是愚蠢的。” – Oli 2010-11-15 15:09:23

在我看来，仅仅为选择器使用框架是毫无意义的。 – Shishant 2011-01-12 19:47:21

要做到这一点在JavaScript中，你需要这样的东西：

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

这是假定该表是与标签之间没有任何的格式。没有人或者这样的人。

或者，您可以简单地使用getElementByTagName('td')并获取返回数组的最后一个元素。这样做的缺点是它不适用于具有多个表格的页面。

来源

2010-11-15 15:06:40

如果浏览器缺失，通常会插入“”。无论如何，这只会影响最后一行的最后一个单元格。 – user113716 2010-11-15 15:11:10

这就是为什么我说假设没有tbody。无论如何，它不是一个巨大的逻辑飞跃，以适应不同的HTML结构的代码。 – 2010-11-15 15:15:30

我的观点是，你不能假设''因为浏览器可能会为你插入它。 – user113716 2010-11-15 15:17:30

在Javascript中，您可以在任何DOM对象上引用.lastChild，但是您必须首先获取元素，因此如果没有jQuery或类似的元素，它并不像听起来那么容易。

显而易见的答案是“使用JQuery”。你已经指出了这一点（即“没有任何框架”），但它是迄今为止最明显的解决方案。

另一种解决方案是Dean Edwards' IE7.js（及相关IE8.js和IE9.js），这是一个Javascript包括试图修补IE浏览器的旧版本，并与标准的CSS兼容性更好，等等。我相信它修复:last-child选择。但是，它又是一个第三方库，所以你可能不想使用它。

当然，您可以为您希望最后一个子样式应用到的元素添加一个额外的类，然后在CSS而不是最后一个孩子中引用它。由于last-child专门用于避免您必须这样做，因此不是理想选择，但它确实可以确保兼容性。

来源

2010-11-15 15:13:59 Spudley

CSS：在JavaScript中的最后一个子选择器？

回答

相关问题