How to add rows to table dynamically – Javascript


<!— Static value to dynamic rows added –>
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”;

<!— Dynamic value to dynamic rows added –>
function showddata(){
var tbb= document.getElementById(‘tblb’);
var val = document.getElementById(‘nameid’).value;
{ val=”No data”;
var rr = tbb.insertRow(1);
var cc = rr.insertCell(0);
cc.innerHTML= val;
<style type=”text/css”>
table {color:#999;}
<h2>Add table row dynamic with static data </h2>
<table id=”Mytab” border=”1″>
<th>Row3 cell1</th>
<th>Row3 cell2</th>
<button name=”add” id=”add” onclick=”AddRrow()”>Add Row</button>

<h2>Add table row dynamic with dynamic data </h2>
<table id=”tblb” border=”1″ >
<thead><tr><th> Table Values Below</th></tr></thead>

<input type=”text” id=”nameid” placeholder=”enter name”/>
<button onclick=”showddata()”>add value to table</button>


Leave a Reply

Your email address will not be published. Required fields are marked *

5 × two =