Adding table rows and columns in JavaScript

With insertRow() method you can insert a new row at the specified position in HTML table. After row is created, use insertCell() method to insert a table cell. Wrap this methods in JavaScript functions and you have code to dynamically add new rows and columns in the HTML table. Please try to click the buttons below …






Small
HTML
table

When you click the “Add row” button, appendRow() function is called. Function is simple, table row is inserted at the last position, and loop iterates through table cells in the first row. Why first row? Because you have to know the number of columns. For each step (cell in the first row), createCell() function creates and attaches DIV element to the newly created table cell.

// append row to the HTML table
function appendRow() {
    var tbl = document.getElementById('my-table'), // table reference
        row = tbl.insertRow(tbl.rows.length),      // append table row
        i;
    // insert table cells to the new row
    for (i = 0; i < tbl.rows[0].cells.length; i++) {
        createCell(row.insertCell(i), i, 'row');
    }
}

// create DIV element and append to the table cell
function createCell(cell, text, style) {
    var div = document.createElement('div'), // create DIV element
        txt = document.createTextNode(text); // create text node
    div.appendChild(txt);                    // append text node to the DIV
    div.setAttribute('class', style);        // set DIV class attribute
    div.setAttribute('className', style);    // set DIV class attribute for IE (?!)
    cell.appendChild(div);                   // append DIV to the table cell
}

createCell() also sets class attribute (needed for the red and green background color) to the DIV element. It’ not necessary to create DIV element (you can append only text node to the TD element), but this is a good example of how to create and append new element to the table cell. appendColumn() is similar to the appendRow() function. For each table row, new cell is inserted to the last position in the row.

// append column to the HTML table
function appendColumn() {
    var tbl = document.getElementById('my-table'), // table reference
        i;
    // open loop for each row and append cell
    for (i = 0; i < tbl.rows.length; i++) {
        createCell(tbl.rows[i].insertCell(tbl.rows[i].cells.length), i, 'col');
    }
}

Here is code used to delete table rows and columns (“Delete both” button, calls both functions).

// delete table rows with index greater then 0
function deleteRows() {
    var tbl = document.getElementById('my-table'), // table reference
        lastRow = tbl.rows.length - 1,             // set the last row index
        i;
    // delete rows with index greater then 0
    for (i = lastRow; i > 0; i--) {
        tbl.deleteRow(i);
    }
}

// delete table columns with index greater then 0
function deleteColumns() {
    var tbl = document.getElementById('my-table'), // table reference
        lastCol = tbl.rows[0].cells.length - 1,    // set the last column index
        i, j;
    // delete cells with index greater then 0 (for each row)
    for (i = 0; i < tbl.rows.length; i++) {
        for (j = lastCol; j > 0; j--) {
            tbl.rows[i].deleteCell(j);
        }
    }
}

85 thoughts on “Adding table rows and columns in JavaScript”

  1. Hi. How can i give every cell an ID like in excel table. For every row to give numbers 1, 2,3 etc. and for every column to give letters a, b, c etc.
    So in the end it must look like a1, b3, d1, d2 etc.

    Thanks

  2. @RazieL – As you can see, JavaScript functions are very simple and with some additional logic you can assign id to every table cell. Try to extend createCell() method with the following line at the end:

    cell.setAttribute('id', 'a1');

    This should assign “a1” to every cell in table. Instead of string “a1” you can place variable and define unique id. Hope this will point you to the right direction.

  3. Hi! If you have an unknown number of parameters that you want to post, you can declare the name on the following way:

    cell.setAttribute('name', 'a1[]');

  4. @ilias – You are right. When form with such named parameter is submitted, parameter will be accepted as an array (on the PHP side) … and thank you for posting a comment.

  6. @Christy – This is small code but it can be a good start point for further development. I’m glad it was useful.
    Cheers!

  7. Hi Dbunic,
    I have a HTML table and insert a new row with table.insertRow(), but the new row doesn’t have any attributes or formatting applied. How can I add a row to the table with attr ( id , title,)?

    Looking for ur support

  8. @Raju – First you will have to define reference to the newly inserted row. Next you can use setAttribute() method to add “id” and “title”. Please see few comments above.

  9. Hi, where can I get the html part of this code? I’m new to js and I’m finding this hard to follow. thanks

  10. Nice article.
    here are couple more options.

    // 1
$('#table tr:last').after('column 1 valuecolumn 2 value');

// 2
$('#table').append('column 1 valuecolumn 2 value');

// 3
var r=$("#table").length; /* To get the total rows in the table */
$("#table").eq(r-1).after('column 1 valuecolumn 2 value');

  12. Hi,
    I want to add row dynamically without using any click function.
    Means only 1 record then its working fine(Statically inserting values in row)
    If i have 2 records then I want to add one more row automatically for second record ,if 3 record 3 column automatically should add so on…
    Is it possible throw HTML if yes please give me some code?

    Thanks
    Shivaji Lohar

  13. i’m a bit confused(sorry, beginner here) i have a table with 7 columns (7 input fields each with their names e.g.:studentno[], firstname[],.. and so on) when i use this code to append rows, the input boxes within the appended rows don’t inherit their preceding input boxes’ name. can anyone help? thanks a lot in advance

  14. I want to add rows dynamically, when i m using .setAttribute in javascript… Help me sir…

  15. Hi, great info and library!
    Is it possible to combine the Add Rows feature with the Drag rows feature ?
    I’ve tried playing around, granted I am a newbie with Web Dev, but I’ve taken example20 and added the Add Row code to it, but the rows that get created with this, I can not drag to change order, or to the Trash.
    Thoughts ?
    Thanks!

  16. actully i want add text box in table
    who is

    ”
    only one click and get new same to same text box

  17. hi i am trying to add new table according to user requirement and each time the table is created the row or column are set by the user or add by user can u please help me doing this??

  18. i have created three table inside the division and button of adding and delete and edit but when i click on the add button the same table must display in the same page how can i do it ? can any one help me

  19. Hi,
    Thanks for beautiful post.

    I want to add column in table with Box, OR Tag.
    I tried, But I didn’t get any appropriate result. I hoping from you. Please, assist me.

    Thanks.

  20. Very nice! Thank you!

    Just a minor note: why don’t you simply create a ‘td’ element instead of a ‘div’ one?
    Example:

    function createCell2(cell,text,style) { 
    var td_el=document.createElement('td');
    var txt=document.createTextNode(text);
    td_el.appendChild(txt);
    td_el.setAttribute('class',style);
    td_el.setAttribute('className',style);
    cell.appendChild(td_el);
}

    Again, thanks for sharing!

Leave a Comment