Question

我正在编写一些JavaScript来克隆包含表单元素的表格行。

到目前为止它运作良好，但有一件我无法弄清楚。

元素名称的数字随着每一行而增加。

E.g：

<table>
    <tbody>
        <tr>
            <td><input type="text" name="name[0][abc]" /></td>
            <td><button class="add-row-button">+</button></td>
        </tr>
        <tr>
            <td><input type="text" name="name[1][abc]" /></td>
            <td><button class="add-row-button">+</button></td>
        </tr>
    </tbody>
</table>

我需要克隆的行来更新数字。每行中有多个字段需要更新的数字，因此我不能在jQuery代码中包含新名称。我认为必须要做的是我需要获取名称，使用正则表达式替换，然后更新属性。

这是我当前的（简化示例）jQuery：

// Current num of elements. Names are 0 based so this will be the number used
// for the new name.
var formRowCount = $('table tr').length;

$('.add-row-button').click(function() {
    // Clone the last row.
    $(this).closest('tr').last().clone().insertAfter($(this).closest('tr'));

    // Set the new field selector.
    var $newRow = $(this).closest('tr').next();

    $newRow.find('input[type="text"]').val('');

    formRowCount++;
});

有人能指出我正确的方向吗？在formRowCount++;之前，我需要获取当前元素名称并使用formRowCount更新数字。

Answer 1

是的，如果你愿意，你可以使用正则表达式。

var formRowCount = $('table tr').length;

$('.add-row-button').click(function() {

    // Clone the last row and insert it.
    $(this).closest('tr').last().clone().insertAfter($(this).closest('tr'));

    // Select the input field
    var $newInput = $(this).closest('tr').next().find('input[type="text"]');

    // Update the input value and name attribute
    var newName = $newInput.attr('name').replace(/^(name\[)\d+(\].+)$/, '$1' + formRowCount + '$2');
    $newInput.val('').attr('name', newName);

    // Update the number
    formRowCount++;

});

jQuery更改name属性中的数字

1 个答案: