Question

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

 <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函数和addTableRow函数中添加一些代码才能做到这一点

<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>

我的想法（不工作）：

var MaxLegnth=1;    
function addTableRow(jQtable){

    MaxLegnth++;
    //alert(MaxLegnth);
    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);}
    });


    jQuery.each($('tr:last td input', this), function() {$(this).attr('name', 'new_name'); alert($(this).attr('name'));});
}

这是一个jsFiddle：http://jsfiddle.net/lolipop/yKjuw

Answer 1

您正在使用jquery并尝试使用默认的html onclick opertion，在这里您将面临一个错误，指出ReferenceError: addTableRow is not defined。

此错误将抛出，因为未在jquery中定义addTableRow函数。

要解决这个问题，请通过在jquery定义中写入来使用jquery编写onclick函数。

HTML：

<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 href="#">del</a>

            </td>
        </tr>
    </table>
</form>
<button type="button" id="addTableRow">add row</button>

jQuery的：

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

    $("#addTableRow").click(function() {
        $("#mans").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);
            }
        });
    });
});

参考 LIVE DEMO

Answer 2

<强> 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>

<强> jQuery的：

$(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;
    })
});

您可以在这里查看：http://jsfiddle.net/shandro/UVgyF/

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

2 个答案:

HTML：

jQuery的：