增加属性值的克隆克隆TR标签

Question

我正在尝试

单击按钮时，我正在尝试添加所有表单元素的行。当添加新行时，表单元素的所有ID将被递增。假设如果默认情况下，ID为" username1"，则克隆的TR将包含输入元素，并带有" username2"。我需要将标签与ID一起增加。

JS

var count = parseInt($('#counter').val(), 10) + 1;
    $('#counter').val(count);
var x = $('.clone-table tr.default').clone();
    fixIds(x, count);
function fixIds(elem, cntr) {
    $(elem).find("[id]").add(elem).each(function() {
    this.id = this.id.replace(/d+$/, "") + cntr;
    });

html

<input type="hidden" id="counter" value="1"/>
.
.
.
<tr>
  <td>
    <input type="text" id="username1" name="username[]"/>
    <label for="username1">Username</label>
  <td>
<tr>

克隆时，我希望将属性值"用户名"标签与输入ID

Answer 1

使用此代码

function fixIds(elem, cntr) {
        $(elem).find("[id]").add(elem).each(function() {
    this.id = this.id.replace(/d+$/, "") + cntr;
});
$(elem).find('input[name="username[]"]').each(function() {
    $(this)
            .attr('id', $(this).attr('id'))
            .next('label').attr('for', $(this).attr('id'))
});

 });

Answer 2

将用户ID存储在变量中，然后在克隆行时将其递增。您可以在将克隆行附加到表之前更改ID。

var lastUserId = 1;
$('#addRow').click(function() {
    //Clone row
    var $row = $('table tr:last').clone(true);
    //Get row ID
    var $rowInput = $row.find('td > input[id^=username]');
    //Increment ID and append it.
    var $newRowId = $rowInput.attr('id')
        .slice(0, (lastUserId.toString().length * -1)) + (++lastUserId).toString();
    //Replace IDs
    $rowInput.attr('id', $newRowId);
    $row.find('td > label').attr('for', $newRowId);
    //Add row to table
    $('table tbody').append($row);
});

jsfiddle：http://jsfiddle.net/qww6s9ch/1/