使用jQuery克隆多个tr行 - Cloning multiple tr rows using jQuery

我编写了一个代码，可以克隆表行，并将其插入到第一行之后。

然而，我需要能够输入更多的数据，所以现在我需要有3行，而不是只有一个。

我正在克隆最接近的tr，然而，现在我需要克隆所有三个tr。我尝试使用"兄弟姐妹"，但没有运气。

所以下面的代码可以工作:

function newClone ( row ) {
    var clone = row.clone(),
        id = parseInt( row.attr('id') ) + 1;
    console.log( row)
    clone.attr('id', id );
    clone.find( 'input, textarea' ).val( '' );
    clone.find( 'input[type="checkbox"]' ).removeAttr( 'checked' );
    clone.find( 'input, select' ).each(function() {
        var name = $( this ).attr( 'name' );
        name = name.replace( /'[('d+)']/, '[' + id + ']');
        $( this ).attr( 'name', name ).attr( 'id', name );
    });
    clone.find( 'input[type="radio"]').val( id );
    return clone;
}
$('.addRow').on('click', function(e) {
    e.preventDefault();
    var $this = $(this),
        parentTR = $this.closest('tr').prev(),
        newTR = newClone( parentTR );
    newTR.insertAfter( parentTR ).fadeIn( 150 );
});

PHP/HTML:

<thead>
<tr>
<th style="text-align:center;">Name</th>
</tr>
</thead>
<?php if ( $rooms ): ?>
<?php foreach ( $rooms as $room ): ?>
   <tr id="<?= $roomI ?>">
        <td>
            <input type="text" name="_foo[<?= $roomI ?>][bar]" value="<?= $room['bar'] ?>" class="widefat">
        </td>
    </tr>
    <?php $roomI++ ?>
<?php endforeach ?>
<?php endif ?>
<td colspan="4">
<a href="#" class="addRow button-primary">Add row</a>
</td>

如果我在Php/html中执行以下操作，问题就会发生:

<?php if ( $rooms ): ?>
<?php foreach ( $rooms as $room ): ?>
<tr id="<?= $roomI ?>">
    <td>
        <input type="text" name="_foo[<?= $roomI ?>][bar]" value="<?= $room['bar'] ?>" class="widefat">
    </td>
</tr>
<tr>
    <td>Title</td>
</tr>
<tr id="<?= $roomI ?>">
    <td>
        <input type="text" name="_foo2[<?= $roomI ?>][bar2]" value="<?= $room['bar2'] ?>" class="widefat">
    </td>
</tr>
<?php $roomI++ ?>
<?php endforeach ?>
<?php endif ?>
<td colspan="4">
<a href="#" class="addRow button-primary">Add row</a>
</td>

$rooms的内容是一个由不同字符串组成的数组——但在使用jQuery创建新行时并不重要。

我的猜测是，这是因为$this.closest('tr')，就像我说的，我已经尝试了$this.siblings，但没有运气。

我如何克隆所有三个tr行与jQuery代码?

我不确定.addRow类相对于PHP模板生成的tr类在DOM中的位置，但是有几个选项。

一种是使用jQuery的.nextAll()方法，然后使用.addBack():

$(this).closest('tr').nextAll().addBack();

这将返回一个包含tr元素的数组，可以将其切片为所需的大小。这是不希望的，因为当PHP模板发生变化时，您必须更新数组切片的长度。

另一个选项是确保具有公共ID的tr表示数据都共享一个公共属性。也许是像id-12345这样的CSS类。然后，您可以用这个类筛选.nextAll所选择的元素:

$(this).closest('tr.id-12345').nextAll('.id-12345').addBack();`

我还强烈建议您查看一下使用JavaScript模板引擎生成HTML的客户端MVC架构。不幸的是，目前每个答案我只能放两个链接。如果你需要一些帮助，请告诉我。

我仍然不确定你到底想要实现什么。但是，如果您想在add-row按钮之前添加三行，则可以这样做:

$('.addRow').on('click', function(e) {
    e.preventDefault();
    var $this = $(this);
    for(n=0;n<3;n++) {
        var parentTR = $this.closest('tr').prev(),
        newTR = newClone( parentTR );
        $this.closest('tr').before(newTR);
    }
});

我对您的代码做了最小的更改，但更好的方法是在newClone -函数中直接克隆这三个，而不是多次从DOM搜索和解析ID。

此代码的工作示例可在http://jsfiddle.net/hampus_b/oe0dnwf0/

找到。