我必须在表单中实现“添加新行”功能。表单的结构类似于:

<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">&nbsp;
       <input type="submit" name="proceed" value="Submit" />
    </td>
</tr>
</table>

可以看出,每一行的v[]数量都有所增加。 v1,v2 ..等等

我在寻找什么

单击“添加更多行”按钮时,应该发生以下情况
  • 在最后一行的上方插入新行(
    按钮)
  • 名称属性值增加1(即v2 [label]变为
    v3 [label],v2 [observation]变成v3 [observation],依此类推)

  • 我尝试了什么

    我最接近的是使用jQuery's clone()。这确实完美地添加了该行。但是,我发现很难找到一种方法,每单击一次按钮,就将name属性的值增加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>
    

    因此,将添加一行,但是name属性保留在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/

    10-12 12:56
    查看更多