为什么innerHTML在和相同的字符串值比较时不返回true

why innerHTML does not return true when compared with same string value?

本文关键字：比较 true 返回字符串 innerHTML 为什么更新时间：2023-12-23

我的html页面上有两个数据完全相同的表，但可能有一些差异需要突出显示。我使用了下面的Javascript，但似乎innerHTML并没有像预期的那样工作-

function CompareTables()
{
var table1 = document.getElementById("table1")
var table2 = document.getElementById("table2")

for(var i=1; i < table1.rows.length; i++)
{
    for(var j=1; j < table2.rows.length; j++){
        var tab1Val = table1.rows[i].cells[0].innerHTML;
        var tab2Val = table2.rows[j].cells[0].innerHTML;
        alert(tab1Val.toUpperCase()+"----"+tab2Val.toUpperCase());
        var changes =RowExists(table2,tab1Val);
        if(!changes[0])
        {
        table1.rows[i].style.backgroundColor = "red";
        instHasChange = true;
        }
}
 function RowExists(table,columnValue)
{
 var hasColumnOrChange = new Array(2);
 hasColumnOrChange[0] = false;
  for(var i=1; i < table.rows.length; i++)
 {
 if(table.rows[i].cells[0].innerHTML == columnValue) /*** why these two does not match**/
 {
   hasColumnOrChange[0] = true;
  }
 return hasColumnOrChange;
}
}

请指出这里出了什么问题。即使所有值相同，（table.rows[i].cells[0].innerHTML == columnValue）也从不返回true。

大多数浏览器都有innerHTML的错误，建议不要使用它。不同的浏览器会做不同的事情，通常会弄乱空白、添加/删除引号和/或更改属性的顺序。

长话短说，决不依赖innerHTML。

在这里，我建议使用一些DOM遍历函数，如.firstChild和.nodeValue。请注意，这些函数对空白很敏感，如果您的TD中除了文本之外还有其他内容，则必须进行调整。

http://jsfiddle.net/tdN5L/

if (table.rows[i].cells[0].firstChild.nodeValue === columnValue)

正如Micah的解决方案所指出的，另一种选择是使用jQuery这样的库，它可以让您忽略大多数浏览器问题和DOM操作的痛苦。不过，我不建议仅仅为了这个问题而引入jQuery的开销。