Add rows dynamically to a table using Javascript

Hello folks!! This is my first post under this blog. I hope you will find it interesting and useful.

Under this post, I am going to add rows dynamically to a table. I am doing it using a few lines of Javascript code. I have used Javascript DOM to give this functionality. This small code has the power to do big wonders. You only need to find the right track to use it. Have a look!!

Demo:
Click to see the demo for adding dynamic rows

Compatibility:

Source:

Just embed the following code to your webpage and you are done…

» Script (Embed the following code in the head tag)

<script type="text/javascript">
function add()
{
 var tablebody = document.getElementById('mytable');
 var row = tablebody.rows.length;
 row= tablebody.insertRow(row);

 var cell = row.insertCell(0);
 var text = document.createTextNode('Dynamic Row Added');
 cell.appendChild(text);
 cell.className = 'bgcolor';
}
</script>

» CSS  (Embed the following code in the head tag)

<style type="text/css">
 *{margin:0; padding:0;}
 body{font-family:Arial, Helvetica, sans-serif; background:#efefef}
 h1{font-size:20px; width:96%; background:#0099FF; color:#fff;
 font-weight:normal; padding:1% 2%}
 div{margin:70px auto 0 auto; width:40%;}
 div div{float:left; width:97.8%; border:#ccc solid 1px; padding:1%;
 background:#fff;}
 table{clear:left; width:100%; margin:10px 0 0 0; border-top:#ccc solid 1px;}
 td{border:1px solid #ccc; border-top:none; padding:2px 0; text-align:center;}
 p{float:left; padding:12px 10px 0 0; font-size:12px;}
 .bgcolor{background:#ffc;}
 input{float:left; margin:10px 0 0 0; }
</style>

» HTML (Embed the following code in the body tag)

<div>
<div>
<h1>Add dynamic rows to a table</h1>
<p>Click to add a row: </p>
<input type="button" onclick="add(); return false;" value="Add Row" />
<table border="0" cellpadding="0" cellspacing="0" id="mytable">

 <tr>
 <td>This is the first row written in HTML</td>
 </tr>
</table>
</div>
</div>

Description:

The small code of javascript is working as follows:

1. “var tablebody = document.getElementById(‘mytable’);“

Under the first line, we are taking the ID of the parent table (inside which we want to append the row). It means that we can add rows to n number of tables on the same page. 

2. “var row = tablebody.rows.length;“

Here, we are taking the total number of rows we already have inside the table and adding the total count in a variable called row.

3. “row = tablebody.insertRow(row);“

In this piece of code, we are inserting the row to the table which ID is “mytable“.

4. “var cell = row.insertCell(0);“

Here we are inserting the cell in the row generated above.

5. “var text = document.createTextNode(‘Dynamic Row Added’);“

In the “text” variable, a text node is being created with the content “Dynamic Row Added“.

6. “cell.appendChild(text);
cell.className = ‘bgcolor’;“

In the last two lines, we are appending the text in the cell and setting the class bgcolor to the cell.

Bingo!! B-) We have done it!! Its a very simple and easy to use code (Dude, you will love it…). Most probably you can use this code in your data list. I guess im on the right track…