1

JavaScript のみを使用して DOM を使用してテーブルの行をトラバースする際に発生していた問題をなんとか修正しましたが、2 つのハードルに遭遇しました。テーブルを作成しようとしています。各行には、その特定の行を上、下、または削除するためのボタンのセットがあります。.replaceChild メソッドを正常に使用できましたが、単に行を交換するのではなく、行を置き換えます。.moveRow を試してみると、HTML テーブル セクションにそのメソッドがないというエラーが表示され続けます。現在の行を下の行と交換しようとすると、同じ問題が発生します。助言がありますか？

function up(x){

        // var tableBody = document.getElementsByTagName("tbody")[0]; // tried it with tableBody and it still didn't work
        var table = x.parentNode.parentNode.parentNode;
        var tableRow = x.parentNode.parentNode.cloneNode(true);
        var previousRow = x.parentNode.parentNode.previousSibling.cloneNode(true);
        table.replaceChild(tableRow,x.parentNode.parentNode.previousSibling);

    }

    function down(x){
        var table = x.parentNode.parentNode.parentNode;
        var tableRow = x.parentNote.parentNode.cloneNode(true);
        var belowRow = x.parentNode.parentNode.nextSibling.cloneNode(true);
        table.moveRow(tableRow,x.parentNode.parentNode.nextSibling);
    }

私のボタン:

<table id="table1" border="1">
        <tbody>
            <tr>
                <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> 
            </tr>   
            <tr id="enterData">
                <td id="buttons">
                    <input type="button" value="Up" onclick="up(this)" />
                    <input type="button" value="Down" onclick="down(this)" /> 
                </td>
            </tr>
        </tbody>
        </table>
4

1 に答える 1

1

insertBefore行を上下に移動するために使用できますappendChild。最後の行についても、* ElementSiblingを使用してテキストノードの問題を回避しますが、互換性の問題が発生する可能性があります。

function up(x){
    var row = x.parentNode.parentNode;
    var table = row.parentNode;
    //Don't move up over the header
    if (row.previousElementSibling && row.previousElementSibling.previousElementSibling){
        table.insertBefore(row,row.previousElementSibling);
    }
}
function down(x){
    var row = x.parentNode.parentNode;
    var table = row.parentNode;
    //can't use insertBefore for last row.
    if (row.nextElementSibling && row.nextElementSibling.nextElementSibling){
        table.insertBefore(row,row.nextElementSibling.nextElementSibling);
    }
    else{
        table.appendChild(row);
    }
}

デモ

于 2013-02-15T01:10:19.710 に答える