Question

我想在用户点击table rows时添加Add button。在新行中有3个文本框。添加行时，id文本框应设置为array list。

例如如果是第二行添加，则文本框ids将为textbox1_1 textbox2_1 textbox3_1
如果添加了第3行，则文本框ids将为textbox1_2 textbox2_2 textbox3_2

因为我想在最后textboxes添加所有这些single string值。

稍后补充： - 确实，第一次表中没有行。

Answer 1

试试这个：

$("#btnAdd").click(function(){
    var id = $('table tr').size(),
    i,
    row = '<tr>';

    for(i = 1; i <= 3; i++) {
       row +=  '<td><input type="text" id="text'+i+'_'+id+'" />';
    }   
    row += '</tr>';

    $('table').append(row);
});

<强> DEMO 另外，如果你想从之前的行构建，你可以这样做：

$("#btnAdd").click(function(){
    var id = $('table tr').size(),
    tr = $('table tr').last().clone();
    $(tr).find('td').each(function (index) {
        $(this).attr('id', 'text'+index+'_'+id);
    });
     $('table').append(tr);
});

<强> DEMO

Answer 2

试试这个：您可以通过克隆第一行来添加行，并通过迭代来更新每个input的ID。

//get the count of available row in table
var count = $('#dynamicTable tr').length;

$("#btnAdd").click(function(){
    //clone the first row in table
    var $tr = $('#dynamicTable tr:first').clone();
    //iterate each input to change its id
    $tr.find('input').each(function(){
        var id = $(this).attr('id');
        id = id.substring(0,id.length-1);
        $(this).attr('id',id+count);
    });

   // update count
    count++;
   //add row to the table
    $('#dynamicTable').append($tr);
});

<强> JSFiddle link

Answer 3

尝试这样

$("#btnAdd").click(function(){
    var rowCount = $("table tr").length;
    var firstRow = $("table tr:first").clone();
    firstRow.find("input").each(function(){
        this.id=this.id.replace("_0","_"+rowCount);
    });
    $("table").append(firstRow);
});

DEMO

Answer 4

用jquery写更少的东西。使用链接如下

$("#btnAdd").click(function(){
    $('table')
    .find("tr:first") // traverse the first tr
    .clone() // clone the row
    .appendTo('table') // append the the table tag
    .end() // reset to default selector
    .find('input').each(function(i,x){
      $(this).prop('id',this.id.split('_')[0]+'_'+(+$('table tr').length-1)); // assign the id to the added new row
    });
});

编辑也完成FIDDLE 希望它有所帮助......

在按钮上添加表行单击

4 个答案: