Return to Course Content Home

JavaScript Example #6

Adding a row to a table

This example shows how you can add a new row to an HTML table..

....
<script type="text/javascript">
 function addRow(){
   var newRow=document.getElementById("theTable").insertRow(2);
   var newCell_0=newRow.insertCell(0);
   var newCell_1=newRow.insertCell(1);
   newCell_0.innerHTML="Added Cell 0";
   newCell_1.innerHTML="Added Cell 1";

 }

 </script>
</head>
<body>
<table id="theTable" border=1>
<tr>
<td>Cell (0,0)</td>
<td>Cell (1,0)</td>
</tr>
<tr>

<td>Cell (0,1)</td>
<td>Cell (1,1)</td>
</tr>
</table>
<p align="left" class="Normal">Click on the button to insert another row... 

<input type="button" onclick="addRow()" value="Click me! />

  
.....
Cell (0,0) Cell (1,0)
Cell (0,1) Cell (1,1)

Click on the button to insert another row...