jQuery动态添加行并更改表单输入名称

我需要添加新行，并将新添加行的表单输入名称更改为新的唯一名称，例如，当我单击“添加脚本”时，将添加具有输入名称的新行：

 <input type="text" name="11" id="11" />
 <input type="text" name="12" id="12" />
 <input type="text" name="13" id="13" /> 

现在我需要将新行输入名称更改为

 <input type="text" name="21" id="21" />
 <input type="text" name="22" id="22" />
 <input type="text" name="23" id="23" /> 

我需要在addTableRow函数的and处添加一些代码才能做到这一点

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script type="text/javascript">
function addTableRow(jQtable){
    jQtable.each(function(){
        var tds = '<tr>';
        jQuery.each($('tr:last td', this), function() {tds += '<td>'+$(this).html()+'</td>';});
        tds += '</tr>';
        if($('tbody', this).length > 0){$('tbody', this).append(tds);
        }else {$(this).append(tds);}
    });
}

$(function(){
    $('table').on('click','tr a',function(e){
       e.preventDefault();
      $(this).parents('tr').remove();
    });
});

</script>
<form id="form1" name="form1" method="post" action="">
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="mans">
  <tr>
    <td>11
        <label for="11"></label>
        <input type="text" name="11" id="11" />
      </td>
    <td>12
        <label for="12"></label>
        <input type="text" name="12" id="12" />
      </td>
    <td>13
        <label for="13"></label>
        <input type="text" name="13" id="13" />
      </td>
    <td><a onclick="delTableRow($('#mans'));" href="#">del</a></td>
  </tr>
</table>
</form>
<button type="button" onclick="addTableRow($('#mans'));">add row</button>

函数addTableRow（jQtable）{
jQtable.each（函数（）{
var tds=“”；
each（$（'tr:last td'，this），function（）{tds+=''+$（this.html（）+''；}）；
tds+=''；
如果（$（'tbody'，this.length>0）{$（'tbody'，this.append（tds）；
}else{$（this.append（tds）；}
});
}
$（函数（）{
$（'table'）。在（'click'，'tra'，函数（e）上{
e、 预防默认值（）；
$（this.parents（'tr'）.remove（）；
});
});
11
12
13
添加行

我的想法（不起作用）：

var MaxLegnth=1；
函数addTableRow（jQtable）{
MaxLegnth++；
//警报（MaxLegnth）；
jQtable.each（函数（）{
var tds=“”；
each（$（'tr:last td'，this），function（）{tds+=''+$（this.html（）+''；}）；
tds+=''；
如果（$（'tbody'，this.length>0）{$（'tbody'，this.append（tds）；
}else{$（this.append（tds）；}
});
each（$（'tr:last td input'，this），function（）{$（this.attr（'name'，'new_name'）；alert（$（this.attr（'name'））；}）；
}

---

这里是一个jsFiddle:

您正在使用jquery并尝试使用默认的html onclick操作，这里您将面临一个错误，即

ReferenceError:addTableRow未定义

此错误将引发，因为jquery中未定义

addTableRow

函数

要克服这一问题，请通过在jquery定义中写入来使用jquery编写onclick函数

HTML:

11
12
13
添加行

jQuery：

$（函数（）{
$（'table'）。在（'click'，'tra'，函数（e）上{
e、 预防默认值（）；
$（this.parents（'tr'）.remove（）；
});
$（“#addTableRow”）。单击（函数（）{
$（“#man”）。每个（函数）{
var tds=“”；
每个（$（'tr:last td'，this），函数（）{
tds+=''+$（this.html（）++''；
});
tds+=''；
如果（$（'tbody'，this）.length>0）{
$（'tbody'，this）.append（tds）；
}否则{
$（此）.append（tds）；
}
});
});
});

请参阅HTML:

<table id="table">
    <tr>
        <td>
            <label for="13">13</label>
            <input type="text" name="13" id="13" value="13" />
        </td>
    </tr>
    <tr>
        <td>
            <label for="11">11</label>
            <input type="text" name="11" id="11" value="11" />
        </td>
    </tr>
    <tr>
        <td>
            <label for="12">12</label>
            <input type="text" name="12" id="12" value="12" />
        </td>
    </tr>
</table>
<a id="addRow" href="#">Add Row</a>

$(function(){
    var table=$('#table');
    $('#addRow').on('click',function(event){
        var tmpArr=[];
        $('tr',table).each(function(){
            var id=$('input',this).attr('id');
            tmpArr.push(id);
        });
        tmpArr.sort();
        var rowsLength=tmpArr.length;
        var lastElementId=tmpArr[rowsLength-1];
        var nextElementId=parseInt(lastElementId)+1;
        var newRow='<tr><td>'+
                        '<label for="'+nextElementId+'">'+nextElementId+'</label>'+
                        '<input type="text" name="'+nextElementId+'" id="'+nextElementId+'" value="'+nextElementId+'" />'+
                  '</td></tr>';
        $(newRow).appendTo(table);
        event.preventDefault;
    })
});

13
11
12

jQuery:

<table id="table">
    <tr>
        <td>
            <label for="13">13</label>
            <input type="text" name="13" id="13" value="13" />
        </td>
    </tr>
    <tr>
        <td>
            <label for="11">11</label>
            <input type="text" name="11" id="11" value="11" />
        </td>
    </tr>
    <tr>
        <td>
            <label for="12">12</label>
            <input type="text" name="12" id="12" value="12" />
        </td>
    </tr>
</table>
<a id="addRow" href="#">Add Row</a>

$(function(){
    var table=$('#table');
    $('#addRow').on('click',function(event){
        var tmpArr=[];
        $('tr',table).each(function(){
            var id=$('input',this).attr('id');
            tmpArr.push(id);
        });
        tmpArr.sort();
        var rowsLength=tmpArr.length;
        var lastElementId=tmpArr[rowsLength-1];
        var nextElementId=parseInt(lastElementId)+1;
        var newRow='<tr><td>'+
                        '<label for="'+nextElementId+'">'+nextElementId+'</label>'+
                        '<input type="text" name="'+nextElementId+'" id="'+nextElementId+'" value="'+nextElementId+'" />'+
                  '</td></tr>';
        $(newRow).appendTo(table);
        event.preventDefault;
    })
});

$（函数（）{
变量表=$（“#表”）；
$（'#addRow'）。在（'click'，函数（事件）{
var-tmpArr=[]；
$（'tr'，表）。每个（函数（）{
var id=$（'input'，this.attr（'id'）；
tmpArr.push（id）；
});
tmpArr.sort（）；
var rowsLength=tmpArr.length；
var lastElementId=tmpArr[rowsLength-1]；
var nextElementId=parseInt（lastElementId）+1；
var newRow=''+
''+nextElementId+''+
''+
'';
$（新行）.appendTo（表）；
违约事件；
})
});

---

您可以在这里查看它：

请单击小提琴中的TidyUp按钮并按照它的建议操作。把你的JS移到JS面板。没关系。我是为你做的。ReferenceError:addTableRow未定义addTableRow（$（“#mans”）；发生ReferenceError是因为您在JSFIDLE中拆分了JavaScript和主体。这是一个工作链接，我在您的原始FIDLE中遇到了相同的错误。

$(function(){
    var table=$('#table');
    $('#addRow').on('click',function(event){
        var tmpArr=[];
        $('tr',table).each(function(){
            var id=$('input',this).attr('id');
            tmpArr.push(id);
        });
        tmpArr.sort();
        var rowsLength=tmpArr.length;
        var lastElementId=tmpArr[rowsLength-1];
        var nextElementId=parseInt(lastElementId)+1;
        var newRow='<tr><td>'+
                        '<label for="'+nextElementId+'">'+nextElementId+'</label>'+
                        '<input type="text" name="'+nextElementId+'" id="'+nextElementId+'" value="'+nextElementId+'" />'+
                  '</td></tr>';
        $(newRow).appendTo(table);
        event.preventDefault;
    })
});