• javascript

    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>