how to add data in a dynamic table

Question

hi i have a table which is created dynamically .this is the code for table creation

function table() {
  var body = document.body,
    tbl = document.createElement('table'),
    tableId = document.createAttribute('id');
  tableId.value = "table";
  tbl.setAttributeNode(tableId);
  tbl.style.width = '100%';
  id = 0;
  for (var i = 0; i < 30; i++) {
    var tr = tbl.insertRow();
    tr.setAttribute("data-id", i, 0);
    for (var j = 0; j < 3; j++) {
      var td = tr.insertCell();
      td.appendChild(document.createTextNode(""));
    }
  }
  $(".lefttablediv").append(tbl);
};
table();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

now it is empty table i want add different data in each tr how can i add data?

You can add It with Jquery after method. refer this link. [Add Row In Table](http://stackoverflow.com/questions/171027/add-table-row-in-jquery) — Jekin Kalariya, Aug 16 '16 at 05:46

score 1 · Accepted Answer · answered Aug 16 '16 at 05:53

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<Html>
<body id ="body">
</body>
</html>
<script> 

 function table() {

        var body = document.body;

                var tbl = document.createElement('table');

                var tableId = document.createAttribute('id');
        tableId.value = "table";
        tbl.setAttributeNode(tableId);
        tbl.style.width = '100%';
      alert(tbl);


console.log(tbl);

       id=0

        for (var i = 0; i < 30; i++) {
            var tr = tbl.insertRow();
            tr.setAttribute("data-id", i, 0);

            for (var j = 0; j < 3; j++) {

                var td = tr.insertCell();
                td.appendChild(document.createTextNode("Please add some text here"));


            }

        }

        $("#body").append(tbl);



    };
    table();
    </script>

td.appendChild(document.createTextNode("")); you are appending blank data which showing blank page add some text it will reflect on page
***** td.appendChild(document.createTextNode("Please add sone text here"))****

after creation data you can change data of entire data by ****document.getElementById("table").innerHTML = "you change any thing here ";*** — Amit Rai, Aug 16 '16 at 05:56

how to add data in a dynamic table

1 Answers1