добавить строки в таблицу из OnLoad JQuery

Question

У меня есть следующая таблица

<table id="invoice"> 
    <tr> 
     <th>Quantity</th> 
     <th>Item</th> 
     <th><input type="button" id="addnew" name="addnew" value="Add Row" /> 
     </th> 
    </tr> 
    <tr id="id1"> 
     <td><input id="quantity1" name="quantity[]" tabindex="1" type="text" value="" /></td> 
     <td><select id="rate1" name="rate[]" tabindex="2" value=""> 
      <option value="">SELECT</option> 
      <option value="1">ONE</option> 
      <option value="2">TWO</option> 
     </select></td> 
     <td><input id="remove1" name="remove[]" tabindex="3" type="button" value="Remove Row"class="remove"/></td> 
    </tr> 
    </table> 

Я могу добавить строку с помощью следующего сценария

var next = 2; 
function addrow(table,add) 
{ 
    $(add).bind('click', function() { 
    var $last = $(table + ' tr:last'); 
    var last_row = $last.clone(); 
    $(last_row).find(":input").each(function() { 
     var store = $(this).attr("id"); 
     var new1 = store.replace(/1/, next); 
     $(this).attr("id",new1); 
    }); 
    last_row.appendTo($(table)) 
    $(table+" tr:last").hide().fadeIn('slow'); 
    next++; 
    }); 
} 
addrow('#invoice','#addnew'); 

Demo

выше сценарий клонирует 2-й строка и добавить к таблице, которая действительно требуется. Но проблема в том, что пользователь вводит какое-то значение во второй строке текстового поля, а после этого добавляет addrow, он реплицирует это в новой строке со значениями. Чтобы преодолеть это, я просто переписываю скрипт.

SO я изменил сценарий к следующему

var next = 2; 
function addrow(table,add) 
{ 
    var $last = $(table + ' tr:last');///changed this line 
    var last_row = $last.clone(); /// changed this line 
    $(add).bind('click', function() { 

    $(last_row).find(":input").each(function() { 
     var store = $(this).attr("id"); 
     var new1 = store.replace(/1/, next); 
     $(this).attr("id",new1); 
    }); 
    last_row.appendTo($(table)) 
    $(table+" tr:last").hide().fadeIn('slow'); 
    next++; 
    }); 
} 

Demo

Это добавляет только один ряд, он просто изменяет последнюю строку, но не добавить более новой строки.

Можно ли исправить этот второй скрипт, поскольку это отлично подходит для моего проекта, так как с ним связано много других сценариев.

Answer 1

var next = 2; 

function addrow(table, add) { 
    var $last = $(table + ' tr:last'); ///changed this line 
    var last_row = $last.clone(); /// changed this line 
    $(add).bind('click', function() { 
     var localClone = last_row.clone(); // you want to clone the DOM row. 
     $(localClone).find(":input").each(function() { 
      var store = $(this).attr("id"); 
      var new1 = store.replace(/1/, next); 
      $(this).attr("id", new1); 
     }); 
     localClone.appendTo($(table)); 
     $(table + " tr:last").hide().fadeIn('slow'); 
     next++; 
    }); 
} 

Вы хотите создать новую строку clone/DOM при каждом нажатии на нее. В противном случае вы просто продолжаете двигаться по одному ряду.

Итак, у нас есть оригинальная последняя строка для клонирования в начале, и мы продолжаем клонирование «чистой строки». Чистый ряд остается чистым, потому что last_row никогда не добавляется в DOM.

@patrickdw упомянул еще один вариант, который должен содержать клонирование последней строки внутри функции щелчка, но очищая данные строки. В зависимости от того, что ваша строка, как очистка, каждый раз может быть стоит.

Приятная вещь в методе @patrickdw заключается в том, что вы можете очистить некоторые данные, но сохранить другие данные. Это может быть полезно для вас.