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

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();
});

• I want to clone the source table but to only 4 rows. Dynamically the source table rows will be added by 1 through a button. And when I clone it, the whole structure will be clone which I don't want to do only until 4 rows.

Answer 1

Try this,

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

or in your case change your code like this,

$( '#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();

you can clone td one by one first four rows by applying this step or you can also append it to other as;

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