Question

我创建了一个可以克隆表行的代码，并在第一个之后插入它。

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

我正在克隆最近的tr，但是，现在我需要克隆所有三个tr。我尝试过使用＆＃34;兄弟姐妹＆＃34;但没有运气。

以下代码有效：

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，但没有运气。

如何使用jQuery代码克隆所有三个tr行？

Answer 1

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

一个是使用jQuery＆＃39; .nextAll() method后跟.addBack()：

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

这将返回一个tr元素数组，可以将其切成所需大小。这是不可取的，因为当PHP模板更改时，您必须更新对数组进行切片的长度。

另一个选择是确保tr表示具有公共ID的数据都共享一个公共属性。例如，可能是像id-12345这样的CSS类。然后，您可以使用该类过滤.nextAll选择的元素：

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

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

Answer 2

我仍然不确定你想要达到的目标。但是如果你想要的是在add-row-button之前添加三行，那么这就可以了：

$('.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/

找到

使用jQuery克隆多个tr行

2 个答案: