Manu Padmanabhan
Manu Padmanabhan

Reputation: 555

how to add data in a dynamic table

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?

Upvotes: 2

Views: 67

Answers (1)

Amit Rai
Amit Rai

Reputation: 397

<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"))****

Upvotes: 1

Related Questions