我需要突出显示动态创建的不同表格中的单元格。我已经创建了表格，现在看起来相同以在某些情况下突出显示。我的代码如下所示，
<script type="text/javascript">
function compare()
{
var rows =document.getElementsByClassName('highlight').tBodies[0].rows, numOfRows = rows.length;
for (var i = 0; i < numOfRows ; i++)
{
if(rows[i].cells[1].innerHTML !== rows[i].cells[2].innerHTML )
{
rows[i].className='rowChange';
rows[i].cells[1].className = 'cellChange';
rows[i].cells[2].className = 'cellChange';
}}
}
</script>
<body>
<div><input type="button" value="highlight" onclick="compare" /></div>
<table id='main'>
<tr>
<td>table1</td>
<td><table class='highlight' id='child1'><tr><td>test1</td><td>test2</td><td>test3</td></tr></table></td>
</tr>
<tr>
<td>table2</td>
<td><table class='highlight' id='child2'><tr><td>test2</td><td>test2</td><td>test2</td></tr></table></td>
</tr>
----
----
----
<tr>
<td>table'n'</td>
<td><table class='highlight' id='childn'><tr><td>test'n'</td><td>test'n'</td><td>test'n'</td></tr></table></td>
</tr>
</table>
</body>
如果我使用工作正常的“id”属性突出显示。但它使代码过于复杂。所以请建议我有效地实现我的目标。提前致谢。
最佳答案
您基本上错误地使用了 document.getElementByClassName:
https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName
document.getElementByClassName 不返回任何 tBodies，而是返回匹配元素的 HTMLCollection，即具有搜索类的元素数组。
您还应该注意到它与 IE9+ 兼容，但我想您已经知道了。
无论如何，获取行的正确实现是这样的:
var rows = document.getElementsByClassName('highlight')[0].rows
一旦我做了那个改变，它就像一个魅力一样奏效。
编辑:让您的代码正常工作的最简单方法是简单地添加另一个循环。一个用于表格，一个用于表格行。
function compare() {
var tables =document.getElementsByClassName('highlight'), rows, numOfRows, i,j;
for(j = 0; j < tables.length; j++) {
rows = tables[j].rows;
numOfRows = rows.length;
for (var i = 0; i < numOfRows ; i++)
{
if(rows[i].cells[1].innerHTML !== rows[i].cells[2].innerHTML )
{
rows[i].className='rowChange';
rows[i].cells[1].className = 'cellChange';
rows[i].cells[2].className = 'cellChange';
}
}
}
}
但这实际上不是我建议您执行此操作的方式(假设您正在客户端动态创建表)。问题是您正在使用 document.getElementByClassName 查找表，但是，正如您指出的那样，在您的实际代码中，您在创建表时动态地创建了表您可以简单地将对这些表的引用存储到一个数组中，然后遍历该表。您确实没有必要使用 document.getElementByClassName，您只是在用它对系统征税。
关于javascript-单个onclick事件来突出显示不同表格中的单元格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20289640/