добавить строку в таблицу из onquest 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');

Демо

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

ТАК, что я изменил скрипт на следующий

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++;  
  });
}

Демо

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

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

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++;
    });
}

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

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

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

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