javascript – 克隆a并将元素的name属性增加1

前端之家收集整理的这篇文章主要介绍了javascript – 克隆a并将元素的name属性增加1前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我要在表单中实现“添加新行”功能.表单的结构类似于:
  1. <table>
  2. <tr>
  3. <td><input type="text" name="v1[label]" /></td>
  4. <td><input type="text" name="v1[observation]" /></td>
  5. <td><input type="text" name="v1[remarks]" /></td>
  6. </tr>
  7. <tr>
  8. <td><input type="text" name="v2[label]" /></td>
  9. <td><input type="text" name="v2[observation]" /></td>
  10. <td><input type="text" name="v2[remarks]" /></td>
  11. </tr>
  12. <tr>
  13. <td colspan="3">
  14. <input type="button" id="addrow" value="Add One More Row">&nbsp;
  15. <input type="submit" name="proceed" value="Submit" />
  16. </td>
  17. </tr>
  18. </table>

如图所示,对于每一行,v []的数量都会增加. v1,v2 ……依此类推

我在寻找什么

单击“添加一行”按钮时,应执行以下操作

>在最后一行(带有的行)上方插入一个新行
纽扣)
> name属性增加1(即v2 [label]变为
v3 [标签],v2 [观察]变成v3 [观察]等等

我做了什么

我最接近的是使用jQuery的clone().这确实完美地添加了行.但是我发现很难找到一种方法,每次单击按钮时都会将name属性的值增加1.

当下正在使用的jquERY

  1. $('input:button[id="addrow"]').click(function(){
  2.  
  3. var secondlast = $('table tr:last').prev('tr');
  4. secondlast.clone().insertBefore(secondlast);
  5.  
  6. });

如果我单击按钮两次,我将添加以下HTML

  1. <tr>
  2. <td><input type="text" name="v2[label]" /></td>
  3. <td><input type="text" name="v2[observation]" /></td>
  4. <td><input type="text" name="v2[remarks]" /></td>
  5. </tr>
  6.  
  7. <tr>
  8. <td><input type="text" name="v2[label]" /></td>
  9. <td><input type="text" name="v2[observation]" /></td>
  10. <td><input type="text" name="v2[remarks]" /></td>
  11. </tr>

因此添加了一行,但name属性保留在v2,而第三和第四行应该是v3和v4.我理解clone()不能这样做,这就是为什么我在寻找替代方案.

解决方法

  1. $('input:button[id="addrow"]').click(function(){
  2. var secondlast = $('table tr:last').prev('tr');
  3. var newClone = secondlast.clone();
  4. // find all the inputs within your new clone and for each one of those
  5. newClone.find('input').each(function() {
  6. var currentNameAttr = $(this).attr('name'); // get the current name attribute
  7. // construct a new name attribute using regular expressions
  8. // the match is divided into three groups (indicated by parentheses)
  9. // p1 will be 'v',p2 will be the number,p3 will be the remainder of the string
  10. var newNameAttr = currentNameAttr.replace(/^(v)(\d+)(.*)$/,function(match,p1,p2,p3) {
  11. return p1+(parseInt(p2)+1)+p3;
  12. });
  13. $(this).attr('name',newNameAttr); // set the incremented name attribute
  14. });
  15. // insert after is I assume what you want
  16. newClone.insertAfter(secondlast);
  17. });

编辑

  1. // you could also simply increment any digit you find as Batman indicated
  2. var newNameAttr = currentNameAttr.replace(/\d+/,function(match) {
  3. return (parseInt(match)+1);
  4. });

猜你在找的JavaScript相关文章