Блог

Следующий код выполняется на странице, которая дает вам возможность добавлять и удалять строки из таблицы полей ввода. Это работает для существующих полей, но когда я добавляю новые строки и пытаюсь удалить их в порядке, требующем замены атрибутов ID и name, это не работает — это не заменит атрибуты 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>");

};
  

Не используйте delegate , используйте on вместо :

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

Кстати, вы предпочтете использовать символ двойной кавычки вместо символа одиночной кавычки для переноса атрибутов HTML.

И вы инкапсулируете слишком много времени this с помощью jquery в своей функции… рекомендуется никогда не вызывать дважды один и тот же элемент с помощью jquery, вместо этого сохраняйте его в переменной :

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