Create table using Javascript

Question

I have a JavaScript function which creates a table with 3 rows 2 cells   Could anybody tell me how I can create the table below using my function  I need to do this for my situation    Here is my javascript and html code given below    x000D   x000D  function tableCreate     x000D      body reference  x000D    var body   document getElementsByTagName  body   0   x000D   x000D       create elements  lt table gt  and a  lt tbody gt  x000D    var tbl   document createElement  table    x000D    var tblBody   document createElement  tbody    x000D   x000D       cells creation x000D    for  var j   0  j  lt   2  j      x000D         table row creation x000D      var row   document createElement  tr    x000D   x000D      for  var i   0  i  lt  2  i      x000D           create element  lt td gt  and text node  x000D          Make text node the contents of  lt td gt  element x000D           put  lt td gt  at end of the table row x000D        var cell   document createElement  td    x000D        var cellText   document createTextNode  cell is row     j      column     i   x000D   x000D        cell appendChild cellText   x000D        row appendChild cell   x000D        x000D   x000D        row added to end of table body x000D      tblBody appendChild row   x000D      x000D   x000D       append the  lt tbody gt  inside the  lt table gt  x000D    tbl appendChild tblBody   x000D       put  lt table gt  in the  lt body gt  x000D    body appendChild tbl   x000D       tbl border attribute to  x000D    tbl setAttribute  border    2    x000D    x000D   lt table width  100   border  1  gt  x000D     lt tr gt  x000D       lt td gt  amp nbsp  lt  td gt  x000D       lt td gt  amp nbsp  lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt  amp nbsp  lt  td gt  x000D       lt td rowspan  2  gt  amp nbsp  lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt  amp nbsp  lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

lt style gt      body          background  radial-gradient rgba 179 255 0 5  rgba 255 255 255 0 5  rgba 0 0 0 0 2            text-align  center             name          margin-top  50px             input          font-size  25px          color   004d00          font-weight  700          font-family  cursive             entry          width  150px          height  40px          font-size  23px          font-family   cursive          background-color   001a66          color  whitesmoke          box-shadow  0 2px 2px 0 rgba 0 0 0 0 5           margin  20px            table          border-collapse  collapse          width  50           margin  50px auto          background-color  burlywood            table th td         border  2px solid black         padding 5px             th          font-size  30px          font-weight  700          font-family  Arial          color   004d00            td          font-size  25px          color  crimson          font-weight  400          font-family  Georgia             length          width  20          lt  style gt   lt body gt       lt  -- Code to get student details -- gt       lt div id  container   gt           lt div class  input  gt               Name   lt input type  text  id  name  class  length  placeholder  eg  Anil Ambani   gt           lt  div gt           lt div class  input  gt               Email   lt input type  text  id  mail  class  length  placeholder  eg  AnilAmbani gmail com   gt           lt  div gt           lt div class  input  gt               Phone   lt input type  text  id  phn   class  length  placeholder  eg  9898989898   gt           lt  div gt           lt div class  input  gt               SLNO   lt input type  number  id  sln  class  length  placeholder  eg  1   gt           lt  div gt           lt br gt           lt button id  entry  gt  I P ENTRY lt  button gt       lt  div gt       lt table id  tabledata  gt          lt tr gt             lt th gt  Name lt  th gt             lt th gt  Email lt  th gt             lt th gt  Phone lt  th gt             lt th gt  Slno lt  th gt          lt  tr gt        lt  table gt   lt  body gt   lt script gt      var entry   document getElementById  entry        entry addEventListener  click  display       var row   1      function display            var nam    document getElementById  name   value          var emal   document getElementById  mail   value          var ph   document getElementById  phn   value          var sl   document getElementById  sln   value          var disp   document getElementById  tabledata            var newRow   disp insertRow row           var cell1   newRow insertCell 0           var cell2   newRow insertCell 1           var cell3   newRow insertCell 2           var cell4   newRow insertCell 3           cell1 innerHTML   nam          cell2 innerHTML   emal          cell3 innerHTML   ph          cell4 innerHTML   sl          row           lt  script gt

User · Answer

I wrote a version that can parse through a list of objects dynamically to create the table as a string  I split it into three functions for writing the header columns  the body rows  and stitching it all together  I exported as a string for use on a server  My code uses template strings to keep things elegant    If you want to add styling  like bootstrap   that can be done by adding more html to HEAD PREFIX and HEAD SUFFIX      helper functions const TABLE PREFIX     lt div gt  lt table class  tg  gt    const TABLE SUFFIX     lt  table gt  lt  div gt    const TABLE HEAD PREFIX     lt thead gt  lt tr gt    const TABLE HEAD SUFFIX     lt  tr gt  lt  thead gt    const TABLE BODY PREFIX     lt tbody gt  lt tr gt    const TABLE BODY SUFFIX     lt  tr gt  lt  tbody gt     function generateTableHead cols      return         TABLE HEAD PREFIX         lt td gt   lt  td gt        cols map  col    gt    lt td gt   col  lt  td gt    join            TABLE HEAD SUFFIX       function generateTableBody cols  data      return         TABLE BODY PREFIX        data map  object  index    gt             lt tr gt  lt td gt   index  lt  td gt            cols map  col    gt    lt td gt   object col   lt  td gt    join             lt  tr gt    join            TABLE BODY SUFFIX              generate an html table from an array of objects with the same values        param  array lt string gt   cols array of object columns used in order of columns on table     param  array lt object gt   data array of objects containing data in a single depth     function generateTable data  defaultCols   false      let cols   defaultCols    if   cols  cols   Object keys data 0       auto generate columns if not defined   return         TABLE PREFIX        generateTableHead cols         generateTableBody cols  data         TABLE SUFFIX        Here s an example use   const mountains         height  200  name   Mt  Mountain         height  323  name   Old Broken Top      const htmlTableString   generateTable mountains

User · Answer

Here is an example of drawing a table using raphael js  We can draw tables directly to the canvas of the browser using Raphael js Raphael js is a javascript library designed specifically for artists and graphic designers   lt  DOCTYPE html gt   lt html gt        lt head gt       lt  head gt       lt body gt           lt div id  panel  gt  lt  div gt       lt  body gt       lt script src  quot http   cdnjs cloudflare com ajax libs raphael 2 1 0 raphael-min js quot  gt   lt  script gt       lt script src  quot https   ajax googleapis com ajax libs jquery 3 5 1 jquery min js quot  gt  lt  script gt    lt script gt      paper   new Raphael 0 0 500 500     width 500px  height 500px  var x   100  var y   50  var height   50 var width   100   WriteTableRow x y width 2 height paper  quot TOP Title quot      draw a table header as merged cell y  y height  WriteTableRow x y width height paper  quot Score Player quot      draw table header as individual cells y  y height  for  i 1 i lt  4 i      var k  k   Math floor Math random      10   1 - 5    5    prepare table contents as random data WriteTableRow x y width height paper i  quot   quot   k    quot  quot      draw a row y  y height      function WriteTableRow x y width height paper TDdata       width cell width  height cell height  paper  canvas  TDdata  texts for a row  Separated each cell content with a comma       var TD   TDdata split  quot   quot        for  j 0 j lt TD length j                  var rect   paper rect x y width height  attr   quot fill quot   quot white quot   quot stroke quot   quot red quot       draw outline         paper text x width 2  y height 2  TD j       draw cell text         x   x   width            lt  script gt    lt  html gt   Please check the preview image  https   i stack imgur com RAFhH png

User · Answer

x000D   x000D  var div   document createElement  div                div setAttribute  id    tbl                document body appendChild div                  document getElementById  tbl   innerHTML     lt table border    1  gt                     lt tr gt                       lt th gt Header 1 lt  th gt                       lt th gt Header 2 lt  th gt                        lt th gt Header 3 lt  th gt                     lt  tr gt                     lt tr gt                       lt td gt Data 1 lt  td gt                       lt td gt Data 2 lt  td gt                       lt td gt Data 3 lt  td gt                     lt  tr gt                     lt tr gt                       lt td gt Data 1 lt  td gt                       lt td gt Data 2 lt  td gt                       lt td gt Data 3 lt  td gt                     lt  tr gt                     lt tr gt                       lt td gt Data 1 lt  td gt                       lt td gt Data 2 lt  td gt                       lt td gt Data 3 lt  td gt                     lt  tr gt    x000D   x000D   x000D

User · Answer

lt html gt       lt head gt           lt meta http-equiv  Content-Type  content  text html  charset ISO-8859-1  gt           lt title gt Insert title here lt  title gt       lt  head gt       lt body gt           lt table id  myTable  cellpadding  2  cellspacing  2  border  1  onclick  tester    gt  lt  table gt           lt script gt              var student              for  var j   0  j  lt  10  j                      student                         name   Name    j                      rank   Rank    j                      stuclass   Class    j                                     var table   document getElementById  myTable                    var row   table insertRow j                   var cell1   row insertCell 0                   var cell2   row insertCell 1                   var cell3   row insertCell 2                    cell1 innerHTML   student name                  cell2 innerHTML   student rank                  cell3 innerHTML   student stuclass                         lt  script gt       lt  body gt   lt  html gt

User · Answer

Might not solve the problem described in this particular question  but might be useful to people looking to create tables out of array of objects    x000D   x000D  function createTable objectArray  fields  fieldTitles    x000D    let body   document getElementsByTagName  body   0   x000D    let tbl   document createElement  table    x000D    let thead   document createElement  thead    x000D    let thr   document createElement  tr    x000D    fieldTitles forEach  fieldTitle    gt    x000D      let th   document createElement  th    x000D      th appendChild document createTextNode fieldTitle    x000D      thr appendChild th   x000D        x000D    thead appendChild thr   x000D    tbl appendChild thead   x000D   x000D    let tbdy   document createElement  tbody    x000D    let tr   document createElement  tr    x000D    objectArray forEach  object    gt    x000D      let tr   document createElement  tr    x000D      fields forEach  field    gt    x000D        var td   document createElement  td    x000D        td appendChild document createTextNode object field     x000D        tr appendChild td   x000D          x000D      tbdy appendChild tr       x000D        x000D    tbl appendChild tbdy   x000D    body appendChild tbl  x000D    return tbl  x000D    x000D   x000D  createTable   x000D     name   Banana   price   3 04    x000D     name   Orange   price   2 56    x000D     name   Apple   price   1 45   x000D     x000D    name    price      Name    Price     x000D   x000D   x000D

User · Answer

This should work  from a few alterations to your code above     x000D   x000D  function tableCreate     x000D    var body   document getElementsByTagName  body   0   x000D    var tbl   document createElement  table    x000D    tbl style width    100    x000D    tbl setAttribute  border    1    x000D    var tbdy   document createElement  tbody    x000D    for  var i   0  i  lt  3  i      x000D      var tr   document createElement  tr    x000D      for  var j   0  j  lt  2  j      x000D        if  i    2  amp  amp  j    1    x000D          break x000D          else   x000D          var td   document createElement  td    x000D          td appendChild document createTextNode   u0020    x000D          i    1  amp  amp  j    1   td setAttribute  rowSpan    2     null  x000D          tr appendChild td  x000D          x000D        x000D      tbdy appendChild tr   x000D      x000D    tbl appendChild tbdy   x000D    body appendChild tbl  x000D    x000D  tableCreate    x000D   x000D   x000D

User · Answer

x000D   x000D  var btn   document createElement  button    x000D  btn innerHTML    Create Table   x000D  document body appendChild btn   x000D  btn addEventListener  click   createTable  true   x000D  function createTable    x000D  var div   document createElement  div    x000D  div setAttribute  id    tbl    x000D  document body appendChild div  x000D   document getElementById  tbl   innerHTML     lt table border    1  gt     x000D      lt tr gt     x000D        lt th gt Header 1 lt  th gt     x000D        lt th gt Header 2 lt  th gt      x000D        lt th gt Header 3 lt  th gt     x000D      lt  tr gt     x000D      lt tr gt     x000D        lt td gt Data 1 lt  td gt     x000D        lt td gt Data 2 lt  td gt     x000D        lt td gt Data 3 lt  td gt     x000D      lt  tr gt     x000D      lt tr gt     x000D        lt td gt Data 1 lt  td gt     x000D        lt td gt Data 2 lt  td gt     x000D        lt td gt Data 3 lt  td gt     x000D      lt  tr gt     x000D      lt tr gt     x000D        lt td gt Data 1 lt  td gt     x000D        lt td gt Data 2 lt  td gt     x000D        lt td gt Data 3 lt  td gt     x000D      lt  tr gt    x000D     x000D   x000D   x000D

User · Answer

Here is the latest method using the  map function in javascript  Simple table code    lt table class  quot table table-hover quot  gt       lt thead class  quot thead-dark quot  gt           lt tr gt            lt th scope  quot col quot  gt Tour lt  th gt            lt th scope  quot col quot  gt Day lt  th gt            lt th scope  quot col quot  gt Time lt  th gt            lt th scope  quot col quot  gt Highlights lt  th gt            lt th scope  quot col quot  gt Action lt  th gt          lt  tr gt       lt  thead gt     lt tbody id  quot tableBody quot  gt                                  lt  tbody gt    and here is javascript code to append something in the table body      const data    quot some kind of json data or object of arrays quot                   const tableData   data map function value                       return                             lt tr gt                               lt td gt   value Name  lt  td gt                               lt td gt   value Day  lt  td gt                               lt td gt   value Time  lt  td gt                               lt td gt   value Highlights  lt  td gt                               lt td class  quot text-center quot  gt  lt a class  quot btn btn-primary quot  href  quot route html id   value ID  quot  role  quot button quot  gt Details lt  a gt  lt  td gt                           lt  tr gt                                             join                  const tabelBody   document querySelector  quot  tableBody quot                    tableBody innerHTML   tableData

User · Answer

I hope you find this helpful   HTML     lt html gt   lt head gt       lt link rel    stylesheet  href    test css  gt   lt body gt    lt  body gt   lt script src    test js  gt  lt  script gt   lt  head gt   lt  html gt    JAVASCRIPT     var tableString     lt table gt        body   document getElementsByTagName  body   0       div   document createElement  div     for  row   1  row  lt  101  row    1         tableString      lt tr gt         for  col   1  col  lt  11  col    1             tableString      lt td gt      row      row          col      col           lt  td gt              tableString      lt  tr gt       tableString      lt  table gt    div innerHTML   tableString  body appendChild div

User · Answer

x000D   x000D  function addTable     x000D    var myTableDiv   document getElementById  myDynamicTable    x000D   x000D    var table   document createElement  TABLE    x000D    table border    1   x000D   x000D    var tableBody   document createElement  TBODY    x000D    table appendChild tableBody   x000D   x000D    for  var i   0  i  lt  3  i      x000D      var tr   document createElement  TR    x000D      tableBody appendChild tr   x000D   x000D      for  var j   0  j  lt  4  j      x000D        var td   document createElement  TD    x000D        td width    75   x000D        td appendChild document createTextNode  Cell     i         j    x000D        tr appendChild td   x000D        x000D      x000D    myTableDiv appendChild table   x000D    x000D  addTable    x000D   lt div id  myDynamicTable  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Slightly shorter code using insertRow and insertCell    x000D   x000D  function tableCreate    x000D      var body   document body  x000D          tbl    document createElement  table    x000D      tbl style width     100px   x000D      tbl style border    1px solid black   x000D   x000D      for var i   0  i  lt  3  i     x000D          var tr   tbl insertRow    x000D          for var j   0  j  lt  2  j     x000D              if i    2  amp  amp  j    1   x000D                  break  x000D                else   x000D                  var td   tr insertCell    x000D                  td appendChild document createTextNode  Cell     x000D                  td style border    1px solid black   x000D                  if i    1  amp  amp  j    1   x000D                      td setAttribute  rowSpan    2    x000D                    x000D                x000D            x000D        x000D      body appendChild tbl   x000D    x000D  tableCreate    x000D   x000D   x000D    Also  this doesn t use some  bad practices   such as setting a border attribute instead of using CSS  and it accesses the body through document body instead of document getElementsByTagName  body   0

User · Answer

This is how to loop through a javascript object and put the data into a table  code modified from  Vanuan s answer    x000D   x000D   lt body gt  x000D       lt script gt  x000D      function createTable objectArray  fields  fieldTitles    x000D        let body   document getElementsByTagName  body   0   x000D        let tbl   document createElement  table    x000D        let thead   document createElement  thead    x000D        let thr   document createElement  tr    x000D   x000D        for  p in objectArray 0    x000D          let th   document createElement  th    x000D          th appendChild document createTextNode p    x000D          thr appendChild th   x000D           x000D          x000D        x000D        thead appendChild thr   x000D        tbl appendChild thead   x000D   x000D        let tbdy   document createElement  tbody    x000D        let tr   document createElement  tr    x000D        objectArray forEach  object    gt    x000D          let n   0  x000D          let tr   document createElement  tr    x000D          for  p in objectArray 0    x000D            var td   document createElement  td    x000D            td setAttribute  style   border  1px solid green    x000D            td appendChild document createTextNode object p     x000D            tr appendChild td   x000D            n    x000D             x000D          tbdy appendChild tr       x000D            x000D        tbl appendChild tbdy   x000D        body appendChild tbl  x000D        return tbl  x000D        x000D   x000D      createTable   x000D                     name   Banana   price   3 04       k 0  x000D                     name   Orange   price   2 56        k 1  x000D                     name   Apple   price   1 45   x000D                    x000D       lt  script gt  x000D   x000D   x000D

User · Answer

lt  DOCTYPE html gt   lt html gt       lt body gt           lt p id  p1  gt               lt b gt Enter the no of row and column to create table  lt  b gt               lt br  gt  lt br  gt               lt table gt                   lt tr gt                       lt th gt No  of Row s   lt  th gt                       lt th gt No  of Column s  lt  th gt                   lt  tr gt                   lt tr gt                       lt td gt  lt input type  text  id  row  value  4    gt  X lt  td gt                       lt td gt  lt input type  text  id  col  value  7    gt Y lt  td gt                   lt  tr gt               lt  table gt               lt br  gt               lt button id  create  onclick  create    gt create table lt  button gt           lt  p gt           lt br  gt  lt br  gt           lt input type  button  value  Reload page  onclick  reloadPage    gt           lt script gt              function create                     var row   parseInt document getElementById  row   value                   var col   parseInt document getElementById  col   value                    var tablestart   lt table id myTable border 1 gt                    var tableend     lt  table gt                    var trstart     lt tr bgcolor  ff9966 gt                    var trend     lt  tr gt                    var tdstart     lt td gt                    var tdend     lt  td gt                    var data  data in cell                   var str1 tablestart   trstart   tdstart   data   tdend   trend   tableend                  document write tablestart                    for  var r 0 r lt row r                          document write trstart                       for var c 0  c lt col  c                              document write tdstart  Row   r   Col   c tdend                                                            document write tableend                   document write   lt br  gt                     var s   lt button id    delete    onclick    deleteTable      gt Delete top Row  lt  button gt                    document write s                   var relod   lt button id    relod    onclick    reloadPage      gt Reload Page  lt  button gt                    document write relod                             function deleteTable                     var dr 0                  if confirm  It will be deleted                              document getElementById  myTable   deleteRow dr                                               function reloadPage                    location reload                           lt  script gt       lt  body gt   lt  html gt

[javascript] Create table using Javascript

Examples related to javascript

Examples related to html-table