2

変更された一連の表形式データがあります。これで、2 つの html テーブルに両方のデータが並べてレンダリングされました。ここで、svn ファイルの diff と同じように、変更された列を強調表示したいと思います。

これでやってみましたが、再帰的にする必要がありますが、方法がわかりません:

function CompareTables(table1, table2) {
    var instHasChange = false;
    for (var i = 0; i < table1.rows.length; i++) {

        var changes = RowExists(table2, table1.rows[i].cells[0].innerHTML, table1.rows[i].cells[1].innerHTML);
        if (!changes[0]) {
            table1.rows[i].style.backgroundColor = "yellow";
            instHasChange = true;
        } else if (changes[1]) {
            table1.rows[i].style.backgroundColor = "yellow";
            instHasChange = true;
        }
    }
    for (var i = 0; i < table2.rows.length; i++) {
        var changes = RowExists(table1, table2.rows[i].cells[0].innerHTML, table2.rows[i].cells[1].innerHTML);
        if (!changes[0]) {
            table2.rows[i].style.backgroundColor = "yellow";
            instHasChange = true;
        } else if (changes[1]) {
            table2.rows[i].style.backgroundColor = "yellow";
            instHasChange = true;
        }
    }
    return instHasChange;
}

function RowExists(table, columnName, columnValue) {

    var hasColumnOrChange = new Array(2);
    hasColumnOrChange[0] = false;
    hasColumnOrChange[1] = false;
    for (var i = 0; i < table.rows.length; i++) {
        if (table.rows[i].cells[0].innerHTML == columnName) {
            hasColumnOrChange[0] = true;
            if (table.rows[i].cells[1].innerHTML != columnValue)
                hasColumnOrChange[1] = true;
        }
    }

    return hasColumnOrChange;
}

上記のコードは、このテーブル内に内部テーブルがない場合にのみ機能します (そのように db 子テーブルのデータを表します)

助けてください！ありがとう！

編集

単一のテーブルに有効なコードをいくつか見つけましたが、テーブル内のテーブルで機能させる方法がわかりません。ここにコードを投稿する

    function highLightDiffList() {
        for (var k = 0; k < 8; k++) {
            var mkrTname = 'table3' + k;
            var actTname = 'table4' + k;
            var makerTr = document.getElementById(mkrTname).childNodes;
            var actualTr = document.getElementById(actTname).childNodes;
            var makerStateLen = makerTr.length;
            var actualStateLen = actualTr.length;
            var actualState = 1;
            var makerState = 1;
            if (makerStateLen > 1)
                makerState = makerTr.item(1).childNodes.item(0).childNodes;
            if (actualStateLen > 1)
                actualState = actualTr.item(1).childNodes.item(0).childNodes;
            var makerTh = document.getElementById(mkrTname).getElementsByTagName("TH").length;
            var minLen;
            var maxLen;
            var flag;
            if (makerStateLen > actualStateLen) {
                minLen = actualStateLen;
                maxLen = makerStateLen;
                flag = 1;
            } else {
                minLen = makerStateLen;
                maxLen = actualStateLen;
                flag = 2;
            }
            for (var i = 1; i < minLen; i++) {
                for (var j = 0; j < makerTh; j++) {
                    if (makerTr.item(i).childNodes.item(0).childNodes.item(j).innerHTML != actualTr.item(i).childNodes.item(0).childNodes.item(j).innerHTML) {
                        makerTr.item(i).childNodes.item(0).childNodes.item(j).style.backgroundColor = document.getElementById('cColor').value;
                        actualTr.item(i).childNodes.item(0).childNodes.item(j).style.backgroundColor = document.getElementById('cColor').value;
                    }
                }
            }
            for (var i = minLen; i < maxLen; i++) {
                for (var j = 0; j < makerTh; j++) {
                    if (flag == 1)
                        makerTr.item(i).style.backgroundColor = document.getElementById('adColor').value;
                    if (flag == 2)
                        actualTr.item(i).style.backgroundColor = document.getElementById('adColor').value;
                }
            }
        }
    }

    function highLightDiff() {
        for (var j = 0; j < 6; j++) {
            var mkrTname = 'table1' + j;
            var actTname = 'table2' + j;

            var makerTr = document.getElementById(mkrTname);
            var actualTr = document.getElementById(actTname);

            var makerStateLen = makerTr.childNodes.item(1).childNodes.length;
            var actualStateLen = actualTr.childNodes.item(1).childNodes.length;

            var makerState = makerTr.childNodes.item(1).childNodes;
            var actualState = actualTr.childNodes.item(1).childNodes;
            for (var i = 1; i < makerStateLen; i++) {
                if (makerState.item(i).childNodes.item(1).innerHTML != '' && actualState.item(i).childNodes.item(1).innerHTML == '') {
                    makerState.item(i).childNodes.item(1).style.backgroundColor = document.getElementById('adColor').value;
                    actualState.item(i).childNodes.item(1).style.backgroundColor = document.getElementById('adColor').value;
                } else {
                    if (makerState.item(i).childNodes.item(1).innerHTML == '' && actualState.item(i).childNodes.item(1).innerHTML != '') {
                        makerState.item(i).childNodes.item(1).style.backgroundColor = document.getElementById('adColor').value;
                        actualState.item(i).childNodes.item(1).style.backgroundColor = document.getElementById('adColor').value;
                    } else {
                        if (makerState.item(i).childNodes.item(1).innerHTML != actualState.item(i).childNodes.item(1).innerHTML) {
                            makerState.item(i).childNodes.item(1).style.backgroundColor = document.getElementById('cColor').value;
                            actualState.item(i).childNodes.item(1).style.backgroundColor = document.getElementById('cColor').value;
                        }
                    }
                }
            }
        }
    }

内部テーブルは、次の方法で作成されます。

<table>
    <tbody>
        <tr>
            <td>
                <div>
                    <table>
                        <tbody>
                            <tr>
                                <td>
4

2 に答える 2

1

内部テーブルの HTML で実際のテキスト diff を実行し、その情報を使用して変更/追加/その他されたセルを導き出す方が簡単な場合があります。たとえば、各テーブルの生の HTML (innerHTML などを介して抽出) を取得する場合、各開始タグと終了タグがそれぞれの行にあることを確認してから、新しい/変更された行を探し、それらをセルにマップすることができます。行番号。

いくつかのJavaScript diff 実装があります。また、DOM レベルの差分システムの実装であるDom-diffを参照することもできます。これを利用できる可能性があります。

于 2013-05-27T11:29:00.177 に答える