-
How to add rows to table dynamically – Javascript
<head>
<!— Static value to dynamic rows added –>
<script>
function AddRrow()
{
var tbl = document.getElementById(‘Mytab’);
var row = tbl.insertRow(1);
var cca = row.insertCell(0);
var ccb = row.insertCell(1);
cca.innerHTML=”data for col 1″;
cba.innerHTML= “dat for column 2”;
}
</script><!— Dynamic value to dynamic rows added –>
<script>
function showddata(){
var tbb= document.getElementById(‘tblb’);
var val = document.getElementById(‘nameid’).value;
if(val==”)
{ val=”No data”;
}
var rr = tbb.insertRow(1);
var cc = rr.insertCell(0);
cc.innerHTML= val;
}
</script>
<style type=”text/css”>
body{color:#000;}
table {color:#999;}
</style>
</head>
<body>
<h2>Add table row dynamic with static data </h2>
<table id=”Mytab” border=”1″>
<thead>
<th>Row3 cell1</th>
<th>Row3 cell2</th>
</thead></table>
<button name=”add” id=”add” onclick=”AddRrow()”>Add Row</button><br/><hr><br/>
<h2>Add table row dynamic with dynamic data </h2>
<table id=”tblb” border=”1″ >
<thead><tr><th> Table Values Below</th></tr></thead></table>
<input type=”text” id=”nameid” placeholder=”enter name”/>
<button onclick=”showddata()”>add value to table</button></body>
