-1

I need to add new rows and change form input names of new added rows to a new unique name for example when i click add script will add new rows with input names:

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

Now I need to change new rows input names to a 

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

I need to add some code at the and of addTableRow function to be able to do that

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

my idea (not working):

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'));});
}

Here it is a jsFiddle: http://jsfiddle.net/lolipop/yKjuw

4

2 に答える 2

2

jqueryを使用していて、デフォルトのhtml onclick操作を実行しようとすると、ここでエラーが発生しますReferenceError: addTableRow is not defined。

addTableRow関数がjquery内で定義されていないため、このエラーがスローされます。

これを克服するには、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);
            }
        });
    });
});

ライブデモを参照

于 2013-03-18T14:40:55.870 に答える
0

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/

于 2013-03-18T15:25:17.727 に答える