Добавление строк таблицы на кнопке Нажмите

Question

Я хочу добавить table rows, когда пользователь нажимает кнопку Add button. В новой строке есть 3 текстовых поля. По мере добавления строк id текстовых полей следует установить как array list.

Для например , если она добавляется вторая строка, текстовое поле ids будет textbox1_1textbox2_1textbox3_1 если она третья строка добавляется, текстовое поле ids будет textbox1_2textbox2_2textbox3_2

Потому что я хочу, чтобы добавить все эти textboxes значения в single string в конце.

FIDDLE

Добавлено позже: - Действительно в первый раз нет строки в таблице.

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 Alternativly, если вы хотите построить из предыдущих строк, вы можете сделать это:

$("#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, итерируя их.

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

EDIT сделано с FIDDLE слишком Надеюсь, что это помогает ....