我必须在表单中实现“添加新行”功能。表单的结构类似于:
<table>
<tr>
<td><input type="text" name="v1[label]" /></td>
<td><input type="text" name="v1[observation]" /></td>
<td><input type="text" name="v1[remarks]" /></td>
</tr>
<tr>
<td><input type="text" name="v2[label]" /></td>
<td><input type="text" name="v2[observation]" /></td>
<td><input type="text" name="v2[remarks]" /></td>
</tr>
<tr>
<td colspan="3">
<input type="button" id="addrow" value="Add One More Row">
<input type="submit" name="proceed" value="Submit" />
</td>
</tr>
</table>
正如所见,每一行的 v[]
数量都在增加。 v1, v2..等等
我在找什么
当点击'Add One More Row'按钮时,应该会发生以下事情
- 新行插入到最后一行的正上方(带有 按钮)
- name 属性值增加 1(即 v2[label] 变为 v3[label]、v2[observation] 变为 v3[observation] 等等) 行
我尝试了什么
我最接近的是使用 jQuery 的
clone()
。这确实完美地添加了行。但我发现很难找到一种方法,每次单击按钮时,名称属性的值都会增加 1。
目前正在使用 jQUERY
$('input:button[id="addrow"]').click(function(){
var secondlast = $('table tr:last').prev('tr');
secondlast.clone().insertBefore(secondlast);
});
如果我点击按钮两次,我会添加以下 HTML
<tr>
<td><input type="text" name="v2[label]" /></td>
<td><input type="text" name="v2[observation]" /></td>
<td><input type="text" name="v2[remarks]" /></td>
</tr>
<tr>
<td><input type="text" name="v2[label]" /></td>
<td><input type="text" name="v2[observation]" /></td>
<td><input type="text" name="v2[remarks]" /></td>
</tr>
因此添加了一行,但名称属性仍为 v2,而第三行和第四行应该为 v3 和 v4。我知道 clone()
无法做到这一点,这就是我寻找替代方案的原因。
最佳答案
$('input:button[id="addrow"]').click(function(){
var secondlast = $('table tr:last').prev('tr');
var newClone = secondlast.clone();
// find all the inputs within your new clone and for each one of those
newClone.find('input').each(function() {
var currentNameAttr = $(this).attr('name'); // get the current name attribute
// construct a new name attribute using regular expressions
// the match is divided into three groups (indicated by parentheses)
// p1 will be 'v', p2 will be the number, p3 will be the remainder of the string
var newNameAttr = currentNameAttr.replace(/^(v)(\d+)(.*)$/, function(match, p1, p2, p3) {
return p1+(parseInt(p2)+1)+p3;
});
$(this).attr('name', newNameAttr); // set the incremented name attribute
});
// insert after is I assume what you want
newClone.insertAfter(secondlast);
});
编辑
// you could also simply increment any digit you find as Batman indicated
var newNameAttr = currentNameAttr.replace(/\d+/, function(match) {
return (parseInt(match)+1);
});
关于javascript - 克隆一个 <tr> 并将 <td> 中元素的名称属性增加 1,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13285760/