为什么innerHTML与相同的字符串值相比不会返回true?

时间:2012-07-20 17:56:45

标签: javascript html innerhtml

我的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,即使所有值都相同。

2 个答案:

答案 0 :(得分:4)

大多数浏览器都有innerHTML的错误,并且它不是推荐使用的属性。不同的浏览器会做不同的事情,通常搞乱空格,添加/删除引号,和/或更改属性的顺序。

长话短说,永远不要依赖innerHTML

在这里,我建议使用一些DOM遍历函数,例如.firstChild.nodeValue。请注意,这些对空白区域很敏感,如果您的TD中还有其他内容,则必须进行调整。

http://jsfiddle.net/tdN5L/

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

Micah的解决方案指出,另一个选择是使用jQuery这样的库,它可以让你忽略大多数这些浏览器问题和DOM操作的痛苦。不过,我不建议仅针对此问题引入jQuery的开销。

相关:

Firefox innerHTML Bug?

innerHTML bug IE8

innerHTML removes attribute quotes in Internet Explorer

答案 1 :(得分:1)

尝试并使用Jquery's method .text

取决于浏览器(Firefox和Chrome),innerHTML不起作用

JQuery为您解决了这个问题。