0

我有一个我一直在处理的表单，它使用 javascript 动态添加和删除表行。我也在尝试对每一行和每一行的文本框进行编号。假设我添加了四行。如果我删除第 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 回答