JQuery Loop Clone

Question

Попытка заставить мою 1 строку таблицы автоматически клонировать ровно 24 раза, а затем нажать кнопку «Добавить строку +» для дополнительного клонирования.

Пример можно найти здесь: http://jsfiddle.net/CzZxf/17/

var uniqueIds = $("#math-table tr").length;
$("#button").click(function(){
var $thisRow = $(this).closest("tr"),
$clone = $thisRow.removeClass().clone(),             // Clone row
$inputs = $clone.find("input").val("").removeClass();
uniqueIds++; //Increment ID
$inputs[0].id = "A" + uniqueIds;
$inputs[1].id = "B" + uniqueIds;
$inputs[2].id = "C" + uniqueIds;


$thisRow.after($clone);                    
});

Answer 1

Вы неправильно понимаете .closest, оно работает аналогично .parents.

Я исправил обход, чтобы найти последний tr здесь: http://jsfiddle.net/CzZxf/19/

var $thisRow = $("#math-table tr:last-child")

Answer 2

Я предпочитаю использовать шаблоны, чем использовать клон. Смотрите мой ДЕМО здесь,

Ниже функция addRow добавит новую строку в таблицу.

var rowTmpl = '<tr>' +
         '<td><input type="text" id="A{ID}" name="A" value=""></td>' +
         '<td><input type="text" id="B{ID}" name="B" value=""></td>' +
         '<td><input type="text" id="C{ID}" name="C" readonly="readonly" tabIndex="-1" value=""></td>' +
         '</tr>';

function addRow () {    
    var rowCount = $('#math-table tbody tr').length;

    //modify template
    var addRow = rowTmpl.replace (/{ID}/g, rowCount);

    //append to the tbody
    $('#math-table tbody').append(addRow);
}