add multiple row dynamically

Question

This is example of my code.. from the example, I've got two rows.. What I want to do is, I want to add the two rows dynamically.. thank you

<table id="datatable">
    <tr>
        <td><input type="text" /></td>
    </tr>
    <tr>
        <td><input type="text" /></td>
    </tr>
</table> 
<button type="button" id="add" onclick="addRow('dataTable')">
    <b>Add</b>
</button>
function addRow(tableID) {
    alert('ttt');
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
    for (var i = 0; i < colCount; i++) {
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[0].cells[i].innerHTML;
        //alert(newcell.childNodes);
        switch(newcell.childNodes[0].type) {
            case "text":
                newcell.childNodes[0].value = "";
                break;
            case "checkbox":
                newcell.childNodes[0].checked = false;
                break;
            case "select-one":
                newcell.childNodes[0].selectedIndex = 0;
                break;
        }
    }
}

jsfiddle example

see: http://stackoverflow.com/questions/10486108/add-rows-to-a-table-with-jquery — Alen Genzić, Feb 26 '13 at 11:03
@AlenGenzić : the example didnt work with me.. could you please modify my script so i can use it? tq — Syazri Aris, Feb 26 '13 at 13:38

Engineer · Answer 1 · 2013-02-26T14:31:53.343

2

Try this:

HTML

<table id="datatable">
       <tr>
        <td><input type="text"  /></td>
       </tr>
       <tr>
        <td><input type="text"  /></td>
       </tr>
     </table> 

<button type="button" id="add" onclick="addRow('dataTable')">
        <b>Add</b>
 </button>

JS

 $(document).ready(function() {
    $('#add').click(function(){ 
        $('#datatable').append(' <tr> <td>Account No</td> <td>:</td> <td colspan="2"><input size="20" type="text" /></td> <td>Bill No</td> <td>:</td> <td><input type="text" /></td> </tr> <tr> <td>Name</td> <td>:</td> <td colspan="2"><input type="text" /></td> <td>Bill date</td> <td>:</td> <td><input type="text" /></td> </tr>');
}); 
});

Fiddle: http://jsfiddle.net/zLXmQ/4/

edited Feb 26 '13 at 14:31

answered Feb 26 '13 at 11:07

Engineer

5,911
4
31
58

your jsfiddle example is mine :) – Syazri Aris Feb 26 '13 at 13:31
obviously...I had to keep it same as you but working so that u can paste it as it is – Engineer Feb 26 '13 at 13:36
@SyazriAris Did u used my answer?? – Engineer Feb 26 '13 at 13:38
yes.. i try use your answer.. but its not what i want.. can u try modify my answer so it usable? thanks – Syazri Aris Feb 26 '13 at 13:48
A row is adding on click of add. What more may i add in it to make it useful for u? – Engineer Feb 26 '13 at 13:49
my script already work if only add one row.. how if u have 10 row with complex row and column? – Syazri Aris Feb 26 '13 at 14:04
No man, your fiddle wasn't working even for 1 row. Please be clear in what are you asking. Your question is asking something else and you comment something else? – Engineer Feb 26 '13 at 14:06
ok im sorry.. my title already ask 'add multiple row dynamically'.. so if u have an answer, pls share with me... i really appreciate it.. – Syazri Aris Feb 26 '13 at 14:16
about 9 to 10 row.. i give u the example ` Account No : Bill No : Name : Bill date : ` – Syazri Aris Feb 26 '13 at 14:23
You mean add these all rows on click of add? – Engineer Feb 26 '13 at 14:24
ok..so i am editing my nswer and giving you a fiddle also to make chages as you want. Check and tell if it helps.:) – Engineer Feb 26 '13 at 14:30
last question.. could u add button to remove each row .. thanks – Syazri Aris Feb 26 '13 at 14:39

score 0 · Answer 2 · answered Feb 26 '13 at 11:03

0

Just browsing through and would like to point out that your table id- is datatable and your parameter is dataTable. hopefully thats pertinent

answered Feb 26 '13 at 11:03

Four_lo

1,150
10
28

score 0 · Answer 3 · edited May 23 '17 at 11:43

0

simply you can do this :

function addRow(tableId)
{
  $('#' + tableId + ' tr:last').after('<tr><td>Enter You New Row Data Here..</td></tr>');
}

for more information check this : Add table row in jQuery

edited May 23 '17 at 11:43

Community

1
1

answered Feb 26 '13 at 11:08

ebram khalil

8,252
7
42
60

add multiple row dynamically

3 Answers3