我已经查看了类似问题的几个答案,但我并不完全理解答案。
我有一个表格,其中包含一些输入,如下所示......
<table class="form right 40 rewardclone_1">
<tr>
<td><label for="financial_goal_1">Amount</label></td>
<td>Pledge <span class="dollar">$</span><input id="financial_goal_1" class="text dollars" type="text" name="financial_goal_1" /> or more</td>
</tr>
<tr>
<td><label for="maximum_1">Maximum</label></td>
<td><input id="maximum_1" class="text dollars" type="text" name="maximum_1" /> available (blank for unlimited)</td>
</tr>
<tr>
<td><label for="reward_1">Reward:</label></td>
<td><textarea id="reward_1" name="reward_1"></textarea></td>
</tr>
</table>
我设法创建了一个按钮,可以在单击时克隆整个表格。
$('#add_reward').click(function() {
$('.rewardclone').clone().appendTo('#rewards_container');
});
问题是我需要在每次克隆表时增加属性上的所有数字(reward_1,maximum_1等)。
非常感谢任何帮助!
jQuery级别:初学者。
感谢。
答案 0 :(得分:2)
这对您的案例来说是一个简单的解决方案:
$('#add_reward').click(function() {
var $x = $('.rewardclone').clone();
$x.appendTo('#rewards_container');
$x.find('input[id], textarea[id], label[for]').each(function() {
if($(this).is('label')) {
var new_id = parseInt($(this).attr('for').split('_').pop(), 10) + 1;
$(this).attr('for', new_id);
} else {
var new_id = parseInt(this.id.split('_').pop(), 10) + 1;
this.id = new_id;
}
});
});
答案 1 :(得分:2)
由于它是一个小表,我更喜欢将它用作模板而不是克隆和查找匹配元素。
注意:取决于服务器技术,您还可以首次从服务器加载rewardTableTmpl,然后使用该模板进一步使用。
$(function() {
var rewardTableTmpl = '<table class="form right 40 rewardclone">' +
'<tr><td><label for="financial_goal_{NUM}">Amount</label></td>' +
'<td>Pledge <span class="dollar">$</span><input id="financial_goal_{NUM}" class="text dollars" type="text" name="financial_goal_{NUM}" /> or more</td>' +
'</tr><tr>' +
'<td><label for="maximum_{NUM}">Maximum</label></td>' +
'<td><input id="maximum_{NUM}" class="text dollars" type="text" name="maximum_{NUM}" /> available (blank for unlimited)</td>' +
'</tr><tr>' +
'<td><label for="reward_{NUM}">Reward:</label></td>' +
'<td><textarea id="reward_{NUM}" name="reward_{NUM}"></textarea></td>' +
'</tr></table>';
$('#add_reward').click(function() {
$('#rewards_container').append(rewardTableTmpl.replace(/{NUM}/g, $('rewardclone').length + 1));
});
});
答案 2 :(得分:0)
我对Selvakumar Arumugam的回答做了一个小调整,因为当我打印{NUM}时,它没有改变。
$(function() {
var rewardTableTmpl = '<table class="form right 40 rewardclone">' +
'<tr><td><label for="financial_goal_{NUM}">Amount</label></td>' +
'<td>Pledge <span class="dollar">$</span><input id="financial_goal_{NUM}" class="text dollars" type="text" name="financial_goal_{NUM}" /> or more</td>' +
'</tr><tr>' +
'<td><label for="maximum_{NUM}">Maximum</label></td>' +
'<td><input id="maximum_{NUM}" class="text dollars" type="text" name="maximum_{NUM}" /> available (blank for unlimited)</td>' +
'</tr><tr>' +
'<td><label for="reward_{NUM}">Reward:</label></td>' +
'<td><textarea id="reward_{NUM}" name="reward_{NUM}"></textarea></td>' +
'</tr></table>';
var count =0;
$('#add_reward').click(function() {
count++;
$('#rewards_container').append(rewardTableTmpl.replace(/{NUM}/g, count));
});
});