Question

以下代码在一个页面上运行，该页面使您能够从输入字段表中添加和删除行。它适用于现有字段，但是当我添加新行并尝试按照需要替换ID和名称属性的顺序删除它时，它不起作用 - 它不会替换ID和name属性。有什么想法会发生什么？

以下函数应该在循环中传递当前要删除的行之后减少剩余的行，并替换ID和name属性中的数字。然后删除该行。

 $("#tblData").delegate("button", "click", function()
       {

           var id1 = $(this).closest('tr').find('td input').attr('id');


           id1 = parseInt(id1.match(/\d+/));


         var count = 0;
         var ID;
         var name;
         var str;
         var str2;
         var n1, n2;
            $('#tblData > tbody > tr').each(function() {
              $(this).find('td').each(function(){
                    //do your stuff, you can use $(this) to get current cell

                    if ($(this).children().children().next().prop("tagName") == "INPUT")
                    {                            
                        if (count > id1){
                            // get id and name attributes
                            ID = $(this).children().children().next().attr("id");
                            name = $(this).children().children().next().attr("name");
                            // match number and replace number in ID
                            str=ID;
                            n1=parseInt(str.match(/\d+/));
                            n1 = n1-1;           
                            ID = ID.replace(/\d+/,n1);


                            // match number and replace number in name
                            str2=name;
                            n2=parseInt(str2.match(/\d+/));
                            n2 = n2-1;    
                            name = name.replace(/\d+/,n2);


                            $(this).children().children().next().attr("id",ID);
                            $(this).children().children().next().attr("name",name);
                        }                        
                    } else if ($(this).children().children().next().prop("tagName") == "SELECT") {

                        if (count > id1){
                            ID = $(this).children().children().next().attr("id");
                            name = $(this).children().children().next().attr("name");
                            // match number and replace number in ID
                            str=ID;
                            n1=parseInt(str.match(/\d+/));
                            n1 = n1-1;            
                            ID = ID.replace(/\d+/,n1);           

                            // match number and replace number in name
                            str2=name;
                            n2=parseInt(str2.match(/\d+/));
                            n2 = n2-1;      
                            name = name.replace(/\d+/,n2);

                            $(this).children().children().next().attr("id",ID);
                            $(this).children().children().next().attr("name",name);
                        }          
                    }
                });                                     
                count = count + 1;

           });  

        $(this).closest('tr').remove();
       }
    );

追加行功能

function Add(){

var id = $( "#tblData tbody tr:last-child td input" ).attr('id');

id = parseInt(id.substring(12, 13)) + 1;

//alert(id);
    $("#tblData tbody").append(
            "<tr>"+
            "<td><label for='BookingRoom_Room_No'>Room  No</label><select single='single' size='1' name='BookingRoom["+id+"][roomId]' id='BookingRoom_"+id+"_roomId'><option value='1'>1</option><option value='2'>2</option></select></td>"+
            "<td><label for='BookingRoom_startDate' class='required'>Start Date <span class='required'>*</span></label><input name='BookingRoom["+id+"][startDate]' id='BookingRoom_"+id+"_startDate' type='text' /></td>"+
            "<td><label for='BookingRoom_endDate' class='required'>End Date <span class='required'>*</span></label><input name='BookingRoom["+id+"][endDate]' id='BookingRoom_"+id+"_endDate' type='text'  /></td>"+
            "<td><label for='BookingRoom_adults' class='required'>Adults <span class='required'>*</span></label><select single='single' size='5' name='BookingRoom["+id+"][adults]' id='BookingRoom_"+id+"_adults'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select></td>"+
            "<td><label for='BookingRoom_children' class='required'>Children <span class='required'>*</span></label><select single='single' size='5' name='BookingRoom["+id+"][children]' id='BookingRoom_"+id+"_children'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select></td>"+
            "<td><button type='button'>Delete</button></td>"+
            "</tr>");

};

Answer 1

请勿使用delegate，而是使用on：

$("#tblData").on("click", "button", function()

顺便说一句，你更喜欢使用双引号字符而不是单引号字符来包装HTML属性。

你在函数中用jquery封装了太多时间this ...一个好的做法是永远不要用jquery调用两次相同的元素，而是将它存储在一个变量中：

var $that = $(this); // put a $ before your var to remember that it is a jquery element

表格形式的新行不会减少

1 个答案: