Question

=== table html structure ===

<div id="table-container">
<table cellspacing="0" cellpadding="0">
<thead>
<tr>
<td>Table head text</td>
<td>Table head text</td>
<td>Table head text</td>
<td>Table head text</td>
<td>Table head text</td>
</tr>
</thead>
<tbody>
<tr class="row">
<td width="10%" data-group="group" data-id="table1-row1-col1" data-type="integer" class="cell-editable" title="Click to input data"></td>
</tr>
<tr class="row">
<td width="10%" data-group="group" data-id="table1-row2-col1" data-type="integer" class="cell-editable" title="Click to input data"></td>
</tr>
<tr class="row">
<td width="10%" data-group="group" data-id="table1-row3-col1" data-type="integer" class="cell-editable" title="Click to input data"></td>
</tr>
<tr class="row">
<td width="10%" data-group="group" data-id="table1-row4-col1" data-type="integer" class="cell-editable" title="Click to input data"></td>
</tr>
<tr class="row">
<td width="10%" data-group="group" data-id="table1-row4-col1" data-type="integer" class="cell-editable" title="Click to input data"></td>
</tr>
</table>
</div>

=== jquery ===

$( '#addNewTable' ).click(function() {
var source = $( '#table-container' ),
            clone = source.clone( true );
clone.insertAfter( source )
                .find( 'tbody tr td' ).not( 'tbody tr td:first-child, tbody tr td.title' ).text('')
                .find( 'tr.expend_row input[type="hidden"]' ).siblings().remove();
});

我想克隆源表但只能克隆4行。动态地，源表行将通过按钮添加1。当我克隆它时，整个结构将是克隆，我不想做到只有4行。

Answer 1

试试这个，

clone.find("tr").eq(3).nextAll().remove();

或在您的情况下更改您的代码，

$( '#addNewTable' ).click(function() {
   var source = $( '#table-container' );
   clone = source.clone( true );
   clone.find("tr").eq(3).nextAll().remove();
   clone.insertAfter( source )
                .find( 'tbody tr td' ).not( 'tbody tr td:first-child, tbody tr td.title' ).text('')
                .find( 'tr.expend_row input[type="hidden"]' ).siblings().remove();
});

Answer 2

$('td:eq(1)').clone();
$('td:eq(2)').clone();
$('td:eq(3)').clone();
$('td:eq(4)').clone();

您可以通过应用此步骤逐个克隆td前四行，或者您也可以将其附加到其他位置;

$('td:eq(1)').appendTo('.your-class-name');

如何将克隆的表行限制为4？

2 个答案: