0

JavaScriptを使用してテーブルの行を動的に追加および削除するフォームに取り組んでいます。また、各行と各行のテキスト ボックスに番号を付けようとしています。追加した 4 つの行があるとします。行番号 3 を削除すると、残りの行には 1、2、4 というラベルが付けられます。私の jquery は、行の番号を 1、2、3 に変更する必要があります。私のコードは以下に掲載されています。行が追加されると認識されないという予感があります。誰でもこれで私を助けることができますか?

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    function deleteRow(row) {
        var x = document.getElementById('bom_table');
        if (x.rows.length > 4) {
            var i = row.parentNode.parentNode.rowIndex;
            document.getElementById('bom_table').deleteRow(i);

        }
    }


    function insRow() {

        var x = document.getElementById('bom_table');
        var len = x.rows.length;
        // deep clone the targeted row
        var new_row = x.rows[len - 2].cloneNode(true);
        // get the total number of rows

        // set the innerHTML of the first row 
        //            new_row.cells[0].innerHTML = len - 2;


        // grab the input from the first cell and update its ID and value
        var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
        inp1.id += len;
        inp1.value = '';

        // grab the input from the first cell and update its ID and value
        var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
        inp2.id += len;
        inp2.value = '';

        // grab the input from the first cell and update its ID and value
        var inp3 = new_row.cells[3].getElementsByTagName('input')[0];
        inp3.id += len;
        inp3.value = '';

        // grab the input from the first cell and update its ID and value
        var inp4 = new_row.cells[4].getElementsByTagName('input')[0];
        inp4.id += len;
        inp4.value = '';

        // grab the input from the first cell and update its ID and value
        var inp5 = new_row.cells[5].getElementsByTagName('input')[0];
        inp5.id += len;
        inp5.value = '';

        // append the new row to the table
        var tbody = document.getElementById('bom_table').getElementsByTagName("tbody")[0];
        tbody.appendChild(new_row);


    }

    function deleteRow2(row) {
        var x = document.getElementById('ro_table');
        if (x.rows.length > 4) {
            var i = row.parentNode.parentNode.rowIndex;
            document.getElementById('ro_table').deleteRow(i);
        }

    }

    function insRow2() {

        var x = document.getElementById('ro_table');
        var len = x.rows.length;
        // deep clone the targeted row
        var new_row = x.rows[len - 2].cloneNode(true);
        // get the total number of rows

        // set the innerHTML of the first row 
        //            new_row.cells[0].innerHTML = len - 2;

        //          if (len = 3)
        //              new_row = x.rows[2].cloneNode(true);
        //          else
        //              ;

        // grab the input from the first cell and update its ID and value
        var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
        inp1.id += len;
        inp1.value = '';

        // grab the input from the first cell and update its ID and value
        var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
        inp2.id += len;
        inp2.value = '';

        // grab the input from the first cell and update its ID and value
        var inp3 = new_row.cells[3].getElementsByTagName('input')[0];
        inp3.id += len;
        inp3.value = '';

        // grab the input from the first cell and update its ID and value
        var inp4 = new_row.cells[4].getElementsByTagName('input')[0];
        inp4.id += len;
        inp4.value = '';

        // grab the input from the first cell and update its ID and value
        var inp5 = new_row.cells[5].getElementsByTagName('input')[0];
        inp5.id += len;
        inp5.value = '';


        // append the new row to the table
        var tbody = document.getElementById('ro_table').getElementsByTagName("tbody")[0];
        tbody.appendChild(new_row);
        //            x.appendChild(new_row);



    }




</script>
<script type="text/javascript">
    $(document).ready(function () {
        var i = 0
        var j = 1
        var k = 1
        $('input').each(function (i) {

            $(this).attr("id", "text_" + i++);

        })
        $('.bom_rowcount').each(function (j) {
            $(this).attr("innerHTML", 1 + j++);

        })
        $('.ro_rowcount').each(function (k) {
            $(this).attr("innerHTML", 1 + k++);

        })
        $(".remove").click(removefunction());

        function removefunction() {
            $('input').each(function (i) {

                $(this).attr("id", "text_" + i++);
            })
            $('.bom_rowcount').each(function (j) {
                $(this).attr("innerHTML", 1 + j++);

            })
            $('.ro_rowcount').each(function (k) {

                $(this).attr("innerHTML", 1 + k++);

            })
        };


        $(".add").click(function () {
            $('input').each(function (i) {
                $(this).attr("id", "text_" + i++);
            })
            $('.bom_rowcount').each(function (j) {
                $(this).attr("innerHTML", 1 + j++);
            })
            $('.ro_rowcount').each(function (k) {
                $(this).attr("innerHTML", 1 + k++);
            })


        });




    });
</script>
4

1 に答える 1

4

コードは、ページの準備が整った直後に存在するノードにイベント ハンドラーを追加するように記述されています。

これには、後で追加するノードは含まれません。

あなたがする必要があるのは、を使用してイベントの委任を設定することですon。イベント委譲はハンドラーをドキュメントに配置し、バブルアップするすべてのイベントを調べて、そのターゲットがセレクターと一致するかどうかを確認します。

ドキュメントを読んで、それに亀裂を入れてください。それでも問題を解決できない場合は、この質問を更新するか (おそらく正しいことではありません)、別の SO の質問をして、試したことと機能していないことを説明してください。

于 2012-06-25T16:17:28.480 に答える