Create table with jQuery - append

Question

I have on page div    lt div id  here table  gt  lt  div gt    and in jquery   for i 0 i lt 3 i             here table   append   result     i        this generating for me    lt div id  here table  gt      result1 result2 result3 etc  lt  div gt    I would like receive this in table    lt div id  here table  gt       lt table gt             lt tr gt  lt td gt result1 lt  td gt  lt  tr gt             lt tr gt  lt td gt result2 lt  td gt  lt  tr gt             lt tr gt  lt td gt result3 lt  td gt  lt  tr gt       lt  table gt   lt  div gt    I doing       here table   append     lt table gt        for i 0 i lt 3 i             here table   append    lt tr gt  lt td gt      result     i     lt  td gt  lt  tr gt              here table   append     lt  table gt        but this generate for me    lt div id  here table  gt       lt table gt   lt  table gt                        lt tr gt  lt td gt result1 lt  td gt  lt  tr gt             lt tr gt  lt td gt result2 lt  td gt  lt  tr gt             lt tr gt  lt td gt result3 lt  td gt  lt  tr gt   lt  div gt    Why  how can i make this correctly   LIVE  http   jsfiddle net n7cyE

User · Answer

It is important to note that you could use Emmet to achieve the same result. First, check what Emmet can do for you at https://emmet.io/

In a nutshell, with Emmet, you can expand a string into a complexe HTML markup as shown in the examples below:

Example #1

ul>li*5

... will produce

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Example #2

div#header+div.page+div#footer.class1.class2.class3

... will produce

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

And list goes on. There are more examples at https://docs.emmet.io/abbreviations/syntax/

And there is a library for doing that using jQuery. It's called Emmet.js and available at https://github.com/christiansandor/Emmet.js

User · Answer

To add multiple columns and rows  we can also do a string concatenation  Not the best way  but it sure works                 var resultstring   lt table gt          for var j 0 j lt arr length j                     array arr contains the field names in this case           resultstring     lt th gt    arr j      lt  th gt                    resultset  each function i  result                 resultset is in json format           resultstring    lt tr gt              for var j 0 j lt arr length j                   resultstring    lt td gt    result arr j      lt  td gt                          resultstring    lt  tr gt                    resultstring    lt  table gt                  resultdisplay   html resultstring     This also allows you to add rows and columns to the table dynamically  without hardcoding the fieldnames

User · Answer

lt table id  game table  border  1  gt    and Jquery  var i  for  i   0  ii  lt  10  i                var tr       lt tr gt  lt  tr gt            var ii          for  ii   0  ii  lt  10  ii                       tr append   lt th gt Firstname lt  th gt                   game table   append tr

User · Answer

i prefer the most readable and extensible way using jquery  Also  you can build fully dynamic content on the fly  Since jquery version 1 4 you can pass attributes to elements which is  imho  a killer feature  Also the code can be kept cleaner     function             var tablerows   new Array               each   result1    result2    result3    function  index  value                 tablerows push   lt tr gt  lt td gt     value     lt  td gt  lt  tr gt                          var table        lt table  gt                 html   tablerows                     var div       lt div  gt                  id   here table               html  table                         body   append div              Addon  passing more than one  html  tag you ve to use array notation like  e g   var div       lt div  gt                  id   here table               html    div1  div2  table                 best Rgds  Franz

User · Answer

When you use append  jQuery expects it to be well-formed HTML  plain text counts    append is not like doing      You need to make the table first  then append it   var  table       lt table  gt     for var i 0  i lt 3  i          table append    lt tr gt  lt td gt      result     i     lt  td gt  lt  tr gt            here table   append  table

User · Answer

Or static HTML without the loop for creating some links  or whatever   Place the  lt div id  menu  gt  on any page to reproduce the HTML         lt  DOCTYPE html gt       lt html xmlns  http   www w3 org 1999 xhtml  gt       lt head gt           lt title gt HTML Masterpage lt  title gt           lt script src    ajax googleapis com ajax libs jquery 1 10 1 jquery min js  gt  lt  script gt            lt script type  text javascript  gt              function nav                     var menuHTML    lt ul gt  lt li gt  lt a href     gt link 1 lt  a gt  lt  li gt  lt  ul gt  lt ul gt  lt li gt  lt a href     gt link 2 lt  a gt  lt  li gt  lt  ul gt                        menu   append menuHTML                          lt  script gt            lt style type  text css  gt           lt  style gt       lt  head gt       lt body onload  nav    gt           lt div id  menu  gt  lt  div gt       lt  body gt       lt  html gt

User · Answer

You need to append the tr inside the table so I updated your selector inside your loop and removed the closing table because it is not necessary       here table   append     lt table   gt        for i 0 i lt 3 i             here table table   append    lt tr gt  lt td gt      result     i     lt  td gt  lt  tr gt          The main problem was that you were appending the tr to the div here table   Edit  Here is a JavaScript version if performance is a concern  Using document fragment will not cause a reflow for every iteration of the loop  var doc   document   var fragment   doc createDocumentFragment     for  i   0  i  lt  3  i          var tr   doc createElement  tr         var td   doc createElement  td        td innerHTML    content        tr appendChild td          does not trigger reflow     fragment appendChild tr      var table   doc createElement  table     table appendChild fragment    doc getElementById  here table   appendChild table

User · Answer

As for me  this approach is prettier    String prototype embraceWith   function tag        return   lt     tag     gt     this     lt      tag     gt        var results        type  Fiat   model 500  color  white        type  Mercedes   model   Benz   color  black       type  BMV   model   X6   color  black       var tableHeader     Type  embraceWith  th      Model  embraceWith  th      Color  embraceWith  th    embraceWith  tr    var tableBody   results map function item        return  item type embraceWith  td     item model toString   embraceWith  td     item color embraceWith  td    embraceWith  tr      join       var table    tableHeader   tableBody  embraceWith  table         result-holder   append table

User · Answer

this is most better  html   lt div id  here table  gt   lt  div gt    jQuery      here table   append    lt table gt       for i 0 i lt 3 i          here table   append    lt tr gt      result     i     lt  tr gt           for ii 0 ii lt 3 ii                  here table   append    lt td gt      result     i     lt  tr gt                   here table   append     lt  table gt

User · Answer

A working example using the method mentioned above and using JSON to represent the data  This is used in my project of dealing with ajax calls fetching data from server   http   jsfiddle net vinocui 22mX6 1   In your html           lt  table id  here table    lt   table        JS code   function feed table tableobj          data is a JSON object with         id    table id           header     a    Asset Tpe    b     Description    c     Assets Value    d   Action              data      a    Non Real Estate     b    Credit card     c     5000     d    Edit Delete                          tableobj id  html               each  tableobj header  tableobj data   function  index   obj         each  obj  function index  row           var line                 each row  function key  value               if 0      index                   line      lt th gt     value     lt  th gt                     else                  line      lt td gt     value     lt  td gt                                      line     lt tr gt     line     lt  tr gt                    tableobj id  append line                               testing   function        var t          id    here table        header     a    Asset Tpe    b     Description    c     Assets Value    d   Action           data      a    Non Real Estate     b    Credit card     c     5000     d    Edit Delete                a    Real Estate     b    Property     c     500000     d    Edit Delete                     feed table t

User · Answer

Or do it this way to use ALL jQuery  The each can loop through any data be it DOM elements or an array object   var data     one    two    three    four    five    six    seven    eight    var numCols   1                 each data  function i      if   i numCols   tRow       lt tr gt        tCell       lt td gt    html data i          table   append tRow append tCell            http   jsfiddle net n7cyE 93

User · Answer

I wrote rather good function that can generate vertical and horizontal tables   function generateTable rowsData  titles  type   class        var  table       lt table gt    addClass  class       var  tbody       lt tbody gt    appendTo  table         if  type    2     vertical table         if  rowsData length     titles length                console error  rows and data rows count doesent match                return false                    titles forEach function  title  index                var  tr       lt tr gt                     lt th gt    html title  appendTo  tr               var rows   rowsData index               rows forEach function  html                        lt td gt    html html  appendTo  tr                                tr appendTo  tbody                      else if  type    1     horsantal table          var valid   true          rowsData forEach function  row                if   row                    valid   false                  return                             if  row length     titles length                    valid   false                  return                                     if   valid                console error  rows and data rows count doesent match                return false                     var  tr       lt tr gt             titles forEach function  title  index                    lt th gt    html title  appendTo  tr                        tr appendTo  tbody            rowsData forEach function  row  index                var  tr       lt tr gt                 row forEach function  html                        lt td gt    html html  appendTo  tr                                tr appendTo  tbody                          return  table      usage example   var title                                                                      var rows          number format data source area 2         number format data intersection area 2         number format data deference area 2       var  ft   generateTable rows  title  2  table table-striped table-hover table-bordered      ft appendTo  GroupAnalyse  results     var title                                                                                              var rows   data edgesData map function  r        return           r directionText          r lineLength          r newLineLength          r stateText          r lineLengthDifference              var  et   generateTable rows  title  1  table table-striped table-hover table-bordered      et appendTo  GroupAnalyse  results         lt hr  gt    appendTo  GroupAnalyse  results      example result

User · Answer

Following is done for multiple file uploads using jquery   File input button    lt div gt    lt input type  file  name  uploadFiles  id  uploadFiles  multiple  multiple  class  input-xlarge  onchange  getFileSizeandName this     gt    lt  div gt    Displaying File name and File size in a table    lt div id  uploadMultipleFilediv  gt   lt table id  uploadTable  class  table table-striped table-bordered table-condensed  gt  lt  table gt  lt  div gt    Javascript for getting the file name and file size   function getFileSizeandName input        var select       uploadTable          select empty        var totalsizeOfUploadFiles           for var i  0  i lt input files length  i                  var filesizeInBytes   input files i  size     file size in bytes         var filesizeInMB    filesizeInBytes    1024 1024   toFixed 2      convert the file size from bytes to mb         var filename   input files i  name          select append     lt tr gt  lt td gt   filename   lt  td gt  lt td gt   filesizeInMB   lt  td gt  lt  tr gt              totalsizeOfUploadFiles   totalsizeOfUploadFiles filesizeInMB            alert  File name is     filename      size     filesizeInMB   MB    size     filesizeInBytes   Bytes

User · Answer

Here is what you can do  http   jsfiddle net n7cyE 4       here table   append   lt table gt  lt  table gt     var table       here table   children     for i 0 i lt 3 i         table append    lt tr gt  lt td gt      result     i     lt  td gt  lt  tr gt          Best regards

User · Answer

This line       here table   append    lt tr gt  lt td gt      result     i     lt  td gt  lt  tr gt        Appends to the div here table not the new table    There are several approaches      Note that the whole content variable is just a string    var content     lt table gt   for i 0  i lt 3  i         content      lt tr gt  lt td gt      result      i     lt  td gt  lt  tr gt      content      lt  table gt        here table   append content     But  with the above approach it is less manageable to add styles and do stuff dynamically with  lt table gt    But how about this one  it does what you expect nearly great   var table       lt table gt    addClass  foo    for i 0  i lt 3  i         var row       lt tr gt    addClass  bar   text  result     i       table append row          here table   append table     Hope this would help

[javascript] Create table with jQuery - append

Examples related to javascript

Examples related to jquery

Examples related to html