在JQuery中使用添加行/克隆递增类

可能重复：

我有一些表格行，如下所示：

<td><input id="RS_Staff_Title1" name="RS_Staff_Title1" style="width:100%;"></td>

<td><input id="RS_No_WD_Staff1" name="RS_No_WD_Staff1" style="width:100%;"></td>

<td><input id="RS_No_Weekdays1" name="RS_No_Weekdays1" style="width:100%;"></td>

<td><input id="RS_No_WE_Staff1" name="RS_No_WE_Staff1" style="width:100%;"></td>

<td><input id="RS_No_WE_Days1" name="RS_No_WE_Days1" style="width:100%;"></td>

<td><img class="remove_row" src="assets/images/delete-icon.png"></td>

我需要做的是让RS_Staff_标题1变为RS_Staff_标题2、RS_Staff_标题3等等——其他专栏也一样

---

我如何才能实现这一点？

如果您不需要输入的ID，可以使用数组，HTML将分配递增的数字：

<td><input name="RS_Staff_Title[]" style="width:100%;"></td>

<td><input name="RS_No_WD_Staff[]" style="width:100%;"></td>

<td><input name="RS_No_Weekdays[]" style="width:100%;"></td>

<td><input name="RS_No_WE_Staff[]" style="width:100%;"></td>

<td><input name="RS_No_WE_Days[]" style="width:100%;"></td>

<td><img class="remove_row" src="assets/images/delete-icon.png"></td>

---

如果不需要输入的ID，可以使用数组，HTML将分配递增的数字：

<td><input name="RS_Staff_Title[]" style="width:100%;"></td>

<td><input name="RS_No_WD_Staff[]" style="width:100%;"></td>

<td><input name="RS_No_Weekdays[]" style="width:100%;"></td>

<td><input name="RS_No_WE_Staff[]" style="width:100%;"></td>

<td><input name="RS_No_WE_Days[]" style="width:100%;"></td>

<td><img class="remove_row" src="assets/images/delete-icon.png"></td>

一种可能的解决方案：

$("#add_row").click(function() {
    var row = $("#staff tbody > tr:last"),
        newRow = row.clone(true);

    newRow.find("input").each(function() {
        var num = +(this.id.match(/\d+$/) || [0])[0] + 1;
        this.id = this.id.replace(/\d+$/, "") + num;
        this.name = this.id;
    });

    newRow.insertAfter(row);
    return false;
});

演示：一种可能的解决方案：

$("#add_row").click(function() {
    var row = $("#staff tbody > tr:last"),
        newRow = row.clone(true);

    newRow.find("input").each(function() {
        var num = +(this.id.match(/\d+$/) || [0])[0] + 1;
        this.id = this.id.replace(/\d+$/, "") + num;
        this.name = this.id;
    });

    newRow.insertAfter(row);
    return false;
});

演示：

您可以试试这个

$("#add_row").click(function() {
    $('#staff tbody>tr:last').clone(true).insertAfter('#staff tbody>tr:last')
    .find('input').attr({'name':'RS_Staff_Title'+$('#staff tbody>tr').length, 'id':'RS_Staff_Title'+$('#staff tbody>tr').length
    });
});

.

你可以试试这个

$("#add_row").click(function() {
    $('#staff tbody>tr:last').clone(true).insertAfter('#staff tbody>tr:last')
    .find('input').attr({'name':'RS_Staff_Title'+$('#staff tbody>tr').length, 'id':'RS_Staff_Title'+$('#staff tbody>tr').length
    });
});

.

试试这个

var j = 1;
var arr = ["RS_Staff_Title", "RS_No_WD_Staff", "RS_No_Weekdays", "RS_No_WE_Staff", "RS_No_WE_Days"]
$("#add_row").click(function() {
    j++;
    var $last = $('#staff tbody>tr:last');
    $last.clone(true).insertAfter('#staff tbody>tr:last');
    // Chaching it again to conter for the newly added Row...
    $last = $('#staff tbody>tr:last');
    // Selecting all the td's in the newly added row..
    var $td = $('#staff tbody>tr:last td');
    $.each(arr, function(i) {
        if(i > 4)
        return false;

       $($td[i]).find('input').attr('id' , (arr[i] + j ));
        $($td[i]).find('input').attr('name' , (arr[i] + j ));
        // Not considering the Images
    });
    return false;
});​

试试这个

var j = 1;
var arr = ["RS_Staff_Title", "RS_No_WD_Staff", "RS_No_Weekdays", "RS_No_WE_Staff", "RS_No_WE_Days"]
$("#add_row").click(function() {
    j++;
    var $last = $('#staff tbody>tr:last');
    $last.clone(true).insertAfter('#staff tbody>tr:last');
    // Chaching it again to conter for the newly added Row...
    $last = $('#staff tbody>tr:last');
    // Selecting all the td's in the newly added row..
    var $td = $('#staff tbody>tr:last td');
    $.each(arr, function(i) {
        if(i > 4)
        return false;

       $($td[i]).find('input').attr('id' , (arr[i] + j ));
        $($td[i]).find('input').attr('name' , (arr[i] + j ));
        // Not considering the Images
    });
    return false;
});​

---

我相信appendTo实际上会将新行插入到旧行中-insertAfter应该可以。此外：问题的答案在哪里？我相信appendTo实际上会将新行插入到旧行中-insertAfter应该是正确的。此外：问题的答案在哪里？您需要更新输入的id以及行的id。@StefanNeubert，谢谢，我错过了它，但现在更新了。您需要更新输入的id以及行的id。@StefanNeubert，谢谢，我错过了它，但现在更新了。