在 jQuery 中克隆表行并更改新行的 ID
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17953633/
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
Clone table rows and change IDs of new rows in jQuery
提问by macklin
I have a table containing the following information:
我有一个包含以下信息的表格：
<table id="Requirements">
<tr>
<td>
<select id="Id.0" name="Id.0" onChange="changeTextBox();">...
</td>
<td>
<select id="Comparator.0" name="Comparator.0" onChange="changeTextBox();">...
</td>
<td>
<input type="text" id="Integer.0" name="Integer.0"/>...
</td>
<td>
<select id="Value.0" name="Value.0">...
</td>
</tr>
</table>
and an add button.
和一个添加按钮。
<input type="button" id="addButton" value="Add" onClick="appendRow();"/>
I need the appendRow()function to not only clone the previous row, but change its id and name to Id.1, Id.2, Comparator.1, Comparator.2, etc. Because some of the drop down menus have so many values, it isn't feasible to create one giant append statement to recreate each row. How can I alter a clone's attributes upon creating it? Thanks!
我需要该appendRow()函数不仅克隆上一行，而且将其 id 和名称更改为 Id.1、Id.2、Comparator.1、Comparator.2 等。因为某些下拉菜单有太多值，所以创建一个巨大的 append 语句来重新创建每一行是不可行的。如何在创建克隆时更改其属性？谢谢！
Edit: The IDs must be in the .0, .1 format. This form posts to a URL that reads them as such
编辑：ID 必须采用 .0、.1 格式。此表单发布到一个 URL，该 URL 读取它们
Edit 2: Code
编辑 2：代码
function appendRow() {
$("QualificationRequirements").append($("QualificationRequirements tr:last").clone());
}
No attempt to change IDs, just a simple clone function that I can't get to work.
没有尝试更改 ID，只是一个我无法开始工作的简单克隆功能。
回答by The Alpha
You may try this (DEMO)
你可以试试这个（演示）
HTML:
HTML：
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data">
<tr>
<td>SelectOne</td>
<td>Select two</td>
<!-- More Headers -->
</tr>
<tr>
<td>
<select id="Id.0" name="Id.0">...</select>
</td>
<!-- More tds -->
<td><input type="button" class="addButton" value="Add" /></td>
</tr>
</table>
JS:
JS：
$(function(){
$("#table-data").on('click', 'input.addButton', function() {
var $tr = $(this).closest('tr');
var allTrs = $tr.closest('table').find('tr');
var lastTr = allTrs[allTrs.length-1];
var $clone = $(lastTr).clone();
$clone.find('td').each(function(){
var el = $(this).find(':first-child');
var id = el.attr('id') || null;
if(id) {
var i = id.substr(id.length-1);
var prefix = id.substr(0, (id.length-1));
el.attr('id', prefix+(+i+1));
el.attr('name', prefix+(+i+1));
}
});
$clone.find('input:text').val('');
$tr.closest('table').append($clone);
});
$("#table-data").on('change', 'select', function(){
var val = $(this).val();
$(this).closest('tr').find('input:text').val(val);
});
});
回答by Niby
Try this:
尝试这个：
function addTableRow(table) {
var $tr = $(table).find('tr:last').clone();
$tr.find('input').attr('id', function(){
var parts = this.id.match(/(\D+)(\d+)$/);
return parts[1] + ++parts[2];
});
$(table).append($tr);
return true;
};
