Adding table rows & 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
	// append table row
	var row = tbl.insertRow(tbl.rows.length);
	// insert table cells to the new row
	for (var 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
	var 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
	// open loop for each row and append cell
	for (var 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
	// set the last row index
	var lastRow = tbl.rows.length -1;
	// delete rows with index greater then 0
	for (var 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
	// set the last column index
	var lastCol = tbl.rows[0].cells.length - 1;
	// delete cells with index greater then 0 (for each row)
	for (var i=0; i<tbl.rows.length; i++)
		for (var j=lastCol; j>0; j--) tbl.rows[i].deleteCell(j);
}

Related posts

Bookmark and Share

5 Responses to “Adding table rows & columns in JavaScript”

  1. Jeff says:

    This has to be one of the most handy articles I've read in a good long while! Thanks!

  2. Josh says:

    This is a good article, very useful. Although, I can't seem to make the delete columns function work, any help?

  3. neki chan says:

    GREAT ! thx so much for sharing :D

  4. Mujahidh Haseem says:

    great,
    thanx lot..
    very usefull.full fill my need.
    advance wishes for future articles.

  5. David Bass says:

    Thank you so much!
    You saved me a lot of time.
    :)

Leave a Reply