Question

在click事件中，我将克隆表格的最后一行，查找所有后续文字输入，设置行和输入的新值和新id属性，然后追加到tbody。

$('#add').click(function(){

    $('tbody').append($('tbody tr:last').clone().find(':text').andSelf()
        .val('').attr('id', function(i, id) {
            var s = id.split('_');
            return s[0] + '_' + (parseInt(s[1]) + 1);
        }));
});

由于某种原因，我无法理解添加的html（请注意，这是错误：input应该在tr内）：

<input id="k_1" class="key" type="text" value="modified">
<input id="v_1" class="value" type="text" value="1326130640">
<tr id="row_1"></tr>

Answer 1

.find(':text').andSelf()

您希望选择包含本身包含input元素的行。所以像这样：

- tr
  - td
    - input
    - input

但是，您的代码实际上同时选择了tr和input元素，实际上是选择中的“根”元素。所以你的选择看起来像这样：

- tr
  - td
    - input
    - input
- input
- input

当您append此选择时，它会依次完成，因此会追加tr，然后input元素为：这意味着它们将作为子项从之前的位置移除tr的。{您无需担心find(':text').andSelf()电话。您的代码应该如下所示：

$('#add').click(function () {
    $('tbody tr:last')
        .clone()
        .appendTo('tbody')
        .find(':text')
            .val('')
            .andSelf()
                .attr('id', function (i, id) {
                    var s = id.split('_');
                    return s[0] + '_' + (parseInt(s[1]) + 1);
                });
});

请注意，这会在之前添加选择:text元素（我使用appendTo而不是append来简化代码）并且只有:text个元素的值已更改（修改tr的值没有意义。）

另请注意，您的tr元素与td元素之间应包含input个元素：将input个元素作为tr的直接子元素无效{1}}。

克隆，修改和附加到另一个DOM元素？

1 个答案: