Dynamic creation of table with DOM

Question

Can someone tell me what s wrong with this code  I want to create a table with 2 columns and 3 rows  and in the cells I want Text1 and Text2 on every row  This code creates a table with 2 columns and 3 rows  but it s only text in the cells in the third row  the others are empty    var tablearea   document getElementById  tablearea     var table   document createElement  table     var tr        var td1   document createElement  td    var td2   document createElement  td     var text1   document createTextNode  Text1    var text2   document createTextNode  Text2     for  var i   1  i  lt  4  i         tr i    document createElement  tr           for  var j   1  j  lt  4  j             td1 appendChild text1           td2 appendChild text2           tr i  appendChild td1           tr i  appendChild td2                        table appendChild tr i        tablearea appendChild table

User · Answer

var html           for  var i   0  i  lt  data length  i         html     lt tr gt                  lt td gt     i 1      lt  td gt                  lt td gt    data i  name     lt  td gt                  lt td gt    data i  number     lt  td gt                  lt td gt    data i  city     lt  td gt                  lt td gt    data i  hobby     lt  td gt                  lt td gt    data i  birthdate     lt  td gt     lt td gt  lt button data-arrayIndex     i     onclick  editData this   gt Edit lt  button gt  lt button data-arrayIndex     i     onclick  deleteData    gt Delete lt  button gt  lt  td gt     lt  tr gt          tableHtml   html html

User · Answer

lt title gt Registration Form lt  title gt   lt script gt      var table       function check             debugger          var name   document myForm name value          if  name          name    null                document getElementById  span1   innerHTML    Please enter the Name               document myform name focus                document getElementById  name   style border    2px solid red               return false                    else               document getElementById  span1   innerHTML                   document getElementById  name   style border    2px solid green                      var age   document myForm age value          var ageFormat        1  8-9     2-5  0-9    6 0     gm           if  age          age    null                document getElementById  span2   innerHTML    Please provide Age               document myForm age focus                document getElementById  age   style border    2px solid red               return false                    else if   ageFormat test age                 document getElementById  span2   innerHTML    Age can t be leass than 18 and greater than 60               document myForm age focus                document getElementById  age   style border    2px solid red               return false                    else               document getElementById  span2   innerHTML                   document getElementById  age   style border    2px solid green                      var password   document myForm password value          if  document myForm password length  lt  6                alert  Error  Password must contain at least six characters                 document myForm password focus                document getElementById  password   style border    2px solid red               return false                    re     0-9  g          if   re test password                 alert  Error  password must contain at least one number  0-9                  document myForm password focus                document getElementById  password   style border    2px solid red               return false                    re     a-z  g          if   re test password                 alert  Error  password must contain at least one lowercase letter  a-z                  document myForm password focus                document getElementById  password   style border    2px solid red               return false                    re     A-Z  g          if   re test password                 alert  Error  password must contain at least one uppercase letter  A-Z                  document myForm password focus                document getElementById  password   style border    2px solid red               return false                    re       amp            lt  gt        -  g          if   re test password                 alert  Error  password must contain at least one special character                 document myForm password focus                document getElementById  password   style border    2px solid red               return false                    else               document getElementById  span3   innerHTML                   document getElementById  password   style border    2px solid green                       if  document getElementById  data      null              createTable            else               appendRow                      return true                  function createTable              var myTableDiv   document getElementById  myTable       indiv         table   document createElement  TABLE        TABLE           table setAttribute  id    data            table border    1           myTableDiv appendChild table      appendChild   insert it in the document  table -- gt  myTableDiv          debugger           var header   table createTHead             var th0   table tHead appendChild document createElement  th             th0 innerHTML    Name           var th1   table tHead appendChild document createElement  th             th1 innerHTML    Age             appendRow                function appendRow             var name   document myForm name value          var age   document myForm age value            var rowCount   table rows length          var row   table insertRow rowCount            row insertCell 0  innerHTML   name          row insertCell 1  innerHTML   age             clearForm                  function clearForm             debugger           document myForm name value               document myForm password value               document myForm age value                    function restrictCharacters evt             evt    evt    evt   window event          var charCode    evt which    evt which   evt keyCode          if    charCode  gt    65    amp  amp   charCode  lt    90         charCode  gt    97    amp  amp   charCode  lt    122        charCode     32                  return true                    else               return false                    lt  script gt      lt div gt       lt form name  myForm  gt            lt table id  tableid  gt                lt tr gt                   lt th gt Name lt  th gt                   lt td gt                       lt input type  text  name  name  placeholder  Name  id  name  onkeypress  return restrictCharacters event      gt  lt  td gt                   lt td gt  lt span id  span1  gt  lt  span gt  lt  td gt               lt  tr gt                lt tr gt                   lt th gt Age lt  th gt                    lt td gt                       lt input type  text  onkeypress  return event charCode     0      d  test String fromCharCode event charCode     placeholder  Age                          name  age  id  age    gt  lt  td gt                   lt td gt  lt span id  span2  gt  lt  span gt  lt  td gt               lt  tr gt                lt tr gt                   lt th gt Password lt  th gt                   lt td gt                       lt input type  password  name  password  id  password  placeholder  Password    gt  lt  td gt                   lt td gt  lt span id  span3  gt  lt  span gt  lt  td gt               lt  tr gt                 lt tr gt                   lt td gt  lt  td gt                   lt td gt                       lt input type  button  value  Submit  onclick  check       gt  lt  td gt                   lt td gt                       lt input type  reset  name  Reset    gt  lt  td gt               lt  tr gt            lt  table gt       lt  form gt        lt div id  myTable  gt       lt  div gt    lt  div gt

User · Answer

It is because you re only creating two td elements and 2 text nodes     Creating all nodes in a loop  Recreate the nodes inside your loop   var tablearea   document getElementById  tablearea        table   document createElement  table     for  var i   1  i  lt  4  i          var tr   document createElement  tr         tr appendChild  document createElement  td          tr appendChild  document createElement  td           tr cells 0  appendChild  document createTextNode  Text1         tr cells 1  appendChild  document createTextNode  Text2           table appendChild tr      tablearea appendChild table       Creating then cloning in a loop  Create them beforehand  and clone them inside the loop   var tablearea   document getElementById  tablearea        table   document createElement  table        tr   document createElement  tr     tr appendChild  document createElement  td      tr appendChild  document createElement  td       tr cells 0  appendChild  document createTextNode  Text1     tr cells 1  appendChild  document createTextNode  Text2       for  var i   1  i  lt  4  i          table appendChild tr cloneNode  true        tablearea appendChild table       Table factory with text string  Make a table factory   function populateTable table  rows  cells  content        if   table  table   document createElement  table        for  var i   0  i  lt  rows    i            var row   document createElement  tr            for  var j   0  j  lt  cells    j                row appendChild document createElement  td                 row cells j  appendChild document createTextNode content    j   1                       table appendChild row             return table      And use it like this   document getElementById  tablearea            appendChild  populateTable null  3  2   Text          Table factory with text string or callback  The factory could easily be modified to accept a function as well for the fourth argument in order to populate the content of each cell in a more dynamic manner   function populateTable table  rows  cells  content        var is func    typeof content      function        if   table  table   document createElement  table        for  var i   0  i  lt  rows    i            var row   document createElement  tr            for  var j   0  j  lt  cells    j                row appendChild document createElement  td                 var text    is func    content         content table  i  j               row cells j  appendChild document createTextNode text                      table appendChild row             return table      Used like this   document getElementById  tablearea            appendChild populateTable null  3  2  function t  r  c                            return   row      r      cell      c

User · Answer

You need to create new TextNodes as well as td nodes for each column  not reuse them among all of the columns as your code is doing   Edit  Revise your code like so   for  var i   1  i  lt  4  i         tr i    document createElement  tr             var td1   document createElement  td          var td2   document createElement  td          td1 appendChild document createTextNode  Text1           td2 appendChild document createTextNode  Text2           tr i  appendChild td1         tr i  appendChild td2     table appendChild tr i

User · Answer

You can create a dynamic table rows as below    var tbl   document createElement  table    tbl style width    100     for  var i   0  i  lt  files length  i               tr   document createElement  tr             var td1   document createElement  td            var td2   document createElement  td            var td3   document createElement  td                      As many  lt td gt  you want          td1 appendChild document createTextNode             td2 appendChild document createTextNode             td3 appendChild document createTextNode             tr appendChild td1           tr appendChild td2           tr appendChild td3            tbl appendChild tr

User · Answer

You must create td and text nodes within loop  Your code creates only 2 td  so only 2 are visible  Example   var table   document createElement  table    for  var i   1  i  lt  4  i         var tr   document createElement  tr            var td1   document createElement  td        var td2   document createElement  td         var text1   document createTextNode  Text1        var text2   document createTextNode  Text2         td1 appendChild text1       td2 appendChild text2       tr appendChild td1       tr appendChild td2        table appendChild tr     document body appendChild table

User · Answer

In My example call add function from button click event and then get value from form control s and call function generateTable  In generateTable Function check first Table is Generaed or not  If table is undefined then call generateHeader Funtion and Generate Header and then call addToRow function for adding new row in table    lt input type  button  class  custom-rounded-bttn bttn-save  value  Add  id  btnAdd  onclick  add    gt     lt div class  row  gt       lt div class  col-lg-12 col-md-12 col-sm-12 col-xs-12  gt           lt div class  dataGridForItem  gt           lt  div gt       lt  div gt   lt  div gt     Call Function From Button click Event  var counts   1  function add         var Weightage       Weightage   val        var ItemName       ItemName option selected   text          var ItemNamenum       ItemName   val        generateTable Weightage ItemName ItemNamenum            Weightage   val               ItemName   val -1        return true        function generateTable Weightage ItemName ItemNamenum       var tableHtml           if     rDataTable   html      undefined           tableHtml   generateHeader         else          tableHtml       rDataTable               var temp       lt div  gt         var row   addToRow Weightage ItemName ItemNamenum         temp  append   row            dataGridForItem   html   tableHtml  append   temp  html            Generate Header   function generateHeader            var html     lt table id  rDataTable  class  table table-striped  gt            html    lt tr class    gt            html    lt td class  tb-heading ui-state-default  gt    Sr No    lt  td gt            html    lt td class  tb-heading ui-state-default  gt    Item Name    lt  td gt            html    lt td class  tb-heading ui-state-default  gt    Weightage    lt  td gt            html    lt  tr gt  lt  table gt            return html        Add New Row   function addToRow Weightage ItemName ItemNamenum       var html   lt tr class  trObj  gt        html    lt td gt   counts   lt  td gt        html    lt td gt   ItemName   lt  td gt        html    lt td gt   Weightage   lt  td gt        html    lt  tr gt        counts        return html

User · Answer

In my example  serial number is managed according to the actions taken on each row using css  I used a form inside each row  and when new row created then the form will get reset    x000D   x000D    auto increment decrement the sr no    x000D  body   x000D      counter-reset  section  x000D    x000D   x000D  i srno   x000D      counter-reset  subsection  x000D    x000D   x000D  i srno before   x000D      counter-increment  section  x000D      content  counter section   x000D    x000D         x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script type  text javascript  gt  x000D        document  ready function      x000D              POITable   on  change    select search type   function  e    x000D              var selectedval     this  val    x000D                this  closest  td   next   html selectedval   x000D              x000D          x000D   lt  script gt  x000D   lt table id  POITable  border  1  gt  x000D       lt tr gt  x000D           lt th gt Sl No lt  th gt  x000D           lt th gt Name lt  th gt  x000D           lt th gt Your Name lt  th gt  x000D           lt th gt Number lt  th gt  x000D           lt th gt Input lt  th gt  x000D           lt th gt Chars lt  th gt  x000D           lt th gt Action lt  th gt  x000D       lt  tr gt  x000D       lt tr gt  x000D           lt td gt  lt i class  srno  gt  lt  i gt  lt  td gt  x000D           lt td gt  x000D               lt select class  search type  name  select one  gt  x000D                   lt option value    gt Select lt  option gt  x000D                   lt option value  abc  gt abc lt  option gt  x000D                   lt option value  def  gt def lt  option gt  x000D                   lt option value  xyz  gt xyz lt  option gt  x000D               lt  select gt  x000D           lt  td gt  x000D           lt td gt  lt  td gt  x000D           lt td gt  x000D               lt select name  select two   gt  x000D                   lt option value    gt Select lt  option gt  x000D                   lt option value  123  gt 123 lt  option gt  x000D                   lt option value  456  gt 456 lt  option gt  x000D                   lt option value  789  gt 789 lt  option gt  x000D               lt  select gt  x000D           lt  td gt  x000D   x000D           lt td gt  lt input type  text  size  8   gt  lt  td gt  x000D           lt td gt  x000D               lt select name  search three     gt  x000D                   lt option value    gt Select lt  option gt  x000D                   lt option value  one  gt 1 lt  option gt  x000D                   lt option value  two  gt 2 lt  option gt  x000D                   lt option value  three  gt 3 lt  option gt  x000D               lt  select gt  x000D           lt  td gt  x000D           lt td gt  lt button type  button  onclick  deleteRow this   gt - lt  button gt  lt button type  button  onclick  insRow    gt   lt  button gt  lt  td gt  x000D       lt  tr gt  x000D   lt  table gt  x000D   x000D   lt script type  text javascript  gt  x000D      function deleteRow row  x000D        x000D          var i   row parentNode parentNode rowIndex  x000D          document getElementById  POITable   deleteRow i   x000D        x000D      function insRow   x000D        x000D          var x   document getElementById  POITable    x000D          var new row   x rows 1  cloneNode true   x000D          var len   x rows length  x000D            new row cells 0  innerHTML   len    auto increment the srno x000D          var inp1   new row cells 1  getElementsByTagName  select   0   x000D          inp1 id    len  x000D          inp1 value       x000D          new row cells 2  innerHTML       x000D          new row cells 4  getElementsByTagName  input   0  value       x000D          x appendChild new row   x000D        x000D   lt  script gt  x000D   x000D   x000D    Hope this helps

User · Answer

when you say  appendchild  you actually move your child from one parent to another  you have to create a node for each cell

[javascript] Dynamic creation of table with DOM

Examples related to javascript

Examples related to dom