1

私のhtmlページにはまったく同じデータを持つ2つのテーブルがありますが、強調表示する必要のある違いはほとんどないかもしれません。私と以下の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を返すことはありません。

4

2 に答える 2

4

ほとんどのブラウザにはバグがinnerHTMLあり、使用することをお勧めするプロパティではありません。ブラウザが異なれば、通常は空白をいじったり、引用符を追加/削除したり、属性の順序を変更したりするなど、さまざまな処理を実行します。

簡単に言えば、決して頼りにしないでinnerHTMLください。

その代わりに、 .firstChildや.nodeValueなどのいくつかのDOMトラバーサル関数を使用することをお勧めします。これらは空白に敏感であり、テキスト以外のものがTDにある場合は、微調整する必要があることに注意してください。

http://jsfiddle.net/tdN5L/

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

Micahのソリューションで指摘されているように、もう1つのオプションは、jQueryなどのライブラリを使用することです。これにより、これらのブラウザーの問題とDOM操作の問題のほとんどを無視できます。ただし、この問題のためだけにjQueryのオーバーヘッドを導入することはお勧めしません。

関連している：

FirefoxのinnerHTMLのバグ？

innerHTMLバグIE8

innerHTMLは、InternetExplorerで属性の引用符を削除します

于 2012-07-20T18:02:37.890 に答える
1

Jqueryのメソッド.textを試して使用してください

ブラウザ（FirefoxおよびChrome）によっては、innerHTMLが機能しない場合があります

JQueryがその問題を処理します。

于 2012-07-20T18:01:12.150 に答える