Question

尝试让我的1个表行自动克隆24次，然后获取“添加行+”按钮以克隆其他行。

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

我更喜欢使用模板而不是使用克隆。在此处查看我的 DEMO ，

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

JQuery循环克隆

2 个答案: