In this Example, you will see that dynamically add rows to table using javascript. Used this code you will insert an unlimited number of row in an HTML table. Used JavaScript Add Rows To Table Dynamically. How javascript insert row at end of table you will learn this tutorial in this program. Create table using javascript.
When you run this program in your computer browser, you will see that 'Enter number of rows' types any number in the box. If you enter 5, then click generate. Five number of row create immediately in the table form.
<html>
<head>
<!-- ***********************Start CSS Part to Design********************** -->
<!-- ******************Start JavaScript Part to Call Function************************ -->
</head>
<dody>
<body bgcolor="orange">
<div id="d1"><p>Enter number of rows</p><input type="text" value="" id='t1'>
</div>
<br><div id="d2"><input type="button" name="Generate" value="Generate" onclick="f()" />
</div>
<table id='tab'><tr><th>id</th><th>Name</th><th>Address</th></tr>
</table>
</body>
</html>
When you run this program in your computer browser, you will see that 'Enter number of rows' types any number in the box. If you enter 5, then click generate. Five number of row create immediately in the table form.
 |
| Dynamically Add Rows To Table Using JavaScript |
 |
| JavaScript Add Rows To Table Dynamically |
<html>
<head>
<!-- ***********************Start CSS Part to Design********************** -->
<!-- ******************End CSS Part************************ --><style>table{width:400px;border:1px solid red;position:absolute;top:150px;left:10px;}th{background-color:black;color: white;}tr{height:30px;background-color:green;}</style>
<!-- ******************Start JavaScript Part to Call Function************************ -->
<script> function f(){ var x = document.getElementById("t1").value; for(var i=0;i<x;i++) { var str="<tr><td></td><td></td><td></td></tr>"; document.getElementById("tab").innerHTML+=str; }}</script><!-- ******************End JavaScript Part************************ -->
</head>
<dody>
<body bgcolor="orange">
<div id="d1"><p>Enter number of rows</p><input type="text" value="" id='t1'>
</div>
<br><div id="d2"><input type="button" name="Generate" value="Generate" onclick="f()" />
</div>
<table id='tab'><tr><th>id</th><th>Name</th><th>Address</th></tr>
</table>
</body>
</html>
0 Comments