jQuery 克隆表行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7961900/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Clone table row
提问by Clinton Green
I have a table with an Add button on the end. When you click this button I want a new table row to be created underneath the current one. I also want the input fields on this row to be blank. I am trying to do this using .clone() but it clones all the rows on the page. Please help. Thanks
我有一张桌子，最后有一个添加按钮。当您单击此按钮时，我希望在当前行下方创建一个新的表格行。我还希望这一行的输入字段为空。我正在尝试使用 .clone() 执行此操作，但它会克隆页面上的所有行。请帮忙。谢谢
Script
脚本
$("input.tr_clone_add")
.live('click', function(){
$(this).closest('.tr_clone')
.clone()
.insertAfter(".tr_clone")
});
HTML
HTML
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data">
<tr>
<td>Name</td>
<td>Location</td>
<td>From</td>
<td>To</td>
<td>Add</td>
</tr>
<tr class="tr_clone">
<td><input type="text" autofocus placeholder="who" name="who" ></td>
<td><input type="text" autofocus placeholder="location" name="location" ></td>
<td><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"></td>
<td><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"></td>
<td><input type="button" name="add" value="Add" class="tr_clone_add"></td>
</tr>
</table><!-- /table#table-data -->
回答by mu is too short
Your problem is that your insertAfter:
你的问题是你的insertAfter：
.insertAfter(".tr_clone")
inserts after every .tr_clone:
在每个之后插入.tr_clone：
the matched set of elements will be inserted after the element(s) specified by this parameter.
匹配的元素集将插入到此参数指定的元素之后。
You probably just want to use afteron the row you're duplicating. And a little .find(':text').val('')will clear the cloned text inputs; something like this:
您可能只想after在要复制的行上使用。一点.find(':text').val('')点将清除克隆的文本输入；像这样：
var $tr = $(this).closest('.tr_clone');
var $clone = $tr.clone();
$clone.find(':text').val('');
$tr.after($clone);
Demo: http://jsfiddle.net/ambiguous/LAECx/or for a modern jQuery: http://jsfiddle.net/ambiguous/LAECx/3274/
演示：http: //jsfiddle.net/ambiguous/LAECx/或现代 jQuery：http: //jsfiddle.net/ambiguous/LAECx/3274/
I'm not sure which input should end up with the focus so I've left that alone.
我不确定哪个输入应该以焦点结束，所以我不理会它。
回答by ?ime Vidas
Here you go:
干得好：
$( table ).delegate( '.tr_clone_add', 'click', function () {
var thisRow = $( this ).closest( 'tr' )[0];
$( thisRow ).clone().insertAfter( thisRow ).find( 'input:text' ).val( '' );
});
Live demo:http://jsfiddle.net/RhjxK/4/
现场演示：http : //jsfiddle.net/RhjxK/4/
Update:The new way of delegating events in jQuery is
更新：在 jQuery 中委托事件的新方法是
$(table).on('click', '.tr_clone_add', function () { … });
回答by maverickosama92
The code below will clone last row and add after last row in table:
下面的代码将克隆最后一行并在表中的最后一行之后添加：
var $tableBody = $('#tbl').find("tbody"),
$trLast = $tableBody.find("tr:last"),
$trNew = $trLast.clone();
$trLast.after($trNew);
Working example : http://jsfiddle.net/kQpfE/2/
工作示例：http: //jsfiddle.net/kQpfE/2/
回答by Steve Wellens
Try this variation:
试试这个变体：
$(".tr_clone_add").live('click', CloneRow);
function CloneRow()
{
$(this).closest('.tr_clone').clone().insertAfter(".tr_clone:last");
}
回答by Taron Hambardzumyan
Try this.
尝试这个。
HTML
HTML
<!-- Your table -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data">
<thead>
<tr>
<th>Name</th>
<th>Location</th>
<th>From</th>
<th>To</th>
<th>Add</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" autofocus placeholder="who" name="who" ></td>
<td><input type="text" autofocus placeholder="location" name="location" ></td>
<td><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"></td>
<td><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"></td>
<td><input type="button" name="add" value="Add" class="tr_clone_add"></td>
</tr>
<tbody>
</table>
<!-- Model of new row -->
<table id="new-row-model" style="display: none">
<tbody>
<tr>
<td><input type="text" autofocus placeholder="who" name="who" ></td>
<td><input type="text" autofocus placeholder="location" name="location" ></td>
<td><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"></td>
<td><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"></td>
<td><input type="button" name="add" value="Add" class="tr_clone_add"></td>
</tr>
<tbody>
</table>
Script
脚本
$("input.tr_clone_add").live('click', function(){
var new_row = $("#new-row-model tbody").clone();
$("#table-data tbody").append(new_row.html());
});
回答by Umair Mehmood
Try this code,I used the following code for cloning and removing the cloned element, i have also used new class (newClass) which can be added automatically with the newly cloned html
试试这个代码，我使用以下代码来克隆和删除克隆的元素，我还使用了新类（newClass），它可以与新克隆的 html 一起自动添加
for cloning..
用于克隆..
$(".tr_clone_add").live('click', function() {
var $tr = $(this).closest('.tr_clone');
var newClass='newClass';
var $clone = $tr.clone().addClass(newClass);
$clone.find(':text').val('');
$tr.after($clone);
});
for removing the clone element.
用于删除克隆元素。
$(".tr_clone_remove").live('click', function() { //Once remove button is clicked
$(".newClass:last").remove(); //Remove field html
x--; //Decrement field counter
});
html is as followinng
html如下
<tr class="tr_clone">
<!-- <td>1</td>-->
<td><input type="text" class="span12"></td>
<td><input type="text" class="span12"></td>
<td><input type="text" class="span12"></td>
<td><input type="text" class="span12"></td>
<td><input type="text" class="span10" readonly>
<span><a href="javascript:void(0);" class="tr_clone_add" title="Add field"><span><i class="icon-plus-sign"></i></span></a> <a href="javascript:void(0);" class="tr_clone_remove" title="Remove field"><span style="color: #D63939;"><i class="icon-remove-sign"></i></span></a> </span> </td> </tr>
回答by Radames E. Hernandez
Is very simple to clonethe last rowwith jquerypressing a button:
很简单，克隆的最后一行用jQuery的按下一个按钮：
Your Table HTML:
你的表格 HTML：
<table id="tableExample">
<thead>
<tr>
<th>ID</th>
<th>Header 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Line 1</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"><button type="button" id="addRowButton">Add row</button></td>
</tr>
</tfoot>
</table>
JS:
JS：
$(document).on('click', '#addRowButton', function() {
var table = $('#tableExample'),
lastRow = table.find('tbody tr:last'),
rowClone = lastRow.clone();
table.find('tbody').append(rowClone);
});
Regards!
问候！
