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

heero 发表于 Dev

ero

===表格HTML结构===

<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行我才不想做。

尼山塞内维尔那

试试这个，

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。