Generate HTML table from 2D JavaScript array

Question

In JavaScript  is it possible to generate an HTML table from a 2D array  The syntax for writing HTML tables tends to be very verbose  so I want to generate an HTML table from a 2D JavaScript array  as shown        quot row 1  cell 1 quot    quot row 1  cell 2 quot         quot row 2  cell 1 quot    quot row 2  cell 2 quot      would become   lt table border  quot 1 quot  gt     lt tr gt       lt td gt row 1  cell 1 lt  td gt       lt td gt row 1  cell 2 lt  td gt     lt  tr gt     lt tr gt       lt td gt row 2  cell 1 lt  td gt       lt td gt row 2  cell 2 lt  td gt     lt  tr gt   lt  table gt   So I m trying to write a JavaScript function that would return a table from a 2D JavaScript array  as shown  function getTable array        take a 2D JavaScript string array as input  and return an HTML table

User · Accepted Answer

Here s a function that will use the dom instead of string concatenation   function createTable tableData      var table   document createElement  table      var tableBody   document createElement  tbody       tableData forEach function rowData        var row   document createElement  tr         rowData forEach function cellData          var cell   document createElement  td          cell appendChild document createTextNode cellData          row appendChild cell                tableBody appendChild row            table appendChild tableBody     document body appendChild table      createTable    row 1  cell 1    row 1  cell 2      row 2  cell 1    row 2  cell 2

User · Answer

Another innerHTML-less version   function makeTable array        var table   document createElement  table        for  var i   0  i  lt  array length  i              var row   document createElement  tr            for  var j   0  j  lt  array i  length  j                  var cell   document createElement  td                cell textContent   array i  j               row appendChild cell                     table appendChild row             return table

User · Answer

This is holmberd answer with a  table header  implementation  function createTable tableData      var table   document createElement  table      var header   document createElement  tr         get first row to be header   var headers   tableData 0         create table header   headers forEach function rowHeader       var th   document createElement  th        th appendChild document createTextNode rowHeader        header appendChild th                 console log headers         insert table header    table append header     var row         var cell             remove first how - header   tableData shift      tableData forEach function rowData  index        row   table insertRow        console log  indice      index       rowData forEach function cellData          cell   row insertCell                cell textContent   cellData                  document body appendChild table       createTable    row 1  cell 1    row 1  cell 2      row 2  cell 1    row 2  cell 2      row 3  cell 1    row 3  cell 2

User · Answer

Here is an example of how you can generate and read data from a matrix m x n    in JavaScript  let createMatrix    m  n    gt          let  row  column                        rowColumn   m   n       for  let i   1  i  lt   rowColumn  i              column push i          if  i   n     0              row push column            column                              return row        let setColorForEachElement    matrix  colors    gt      let row   matrix map row   gt        let column   row map  column  key    gt          return   number  column  color  colors key               return column        return row     const colors     red    green    blue    purple    brown    yellow    orange    grey   const matrix   createMatrix 6  8  const colorApi   setColorForEachElement matrix  colors   let table    lt table gt   colorApi forEach row   gt      table     lt tr gt       row forEach column   gt   table      lt td style  background    column color    gt   column number  lt td gt       table    lt  tr gt      table     lt  table gt   document write table

User · Answer

Generate table and support HTML as input   Inspired by  spiny-norman https   stackoverflow com a 15164796 2326672  And  bornd https   stackoverflow com a 6234804 2326672  function escapeHtml unsafe        return String unsafe            replace   amp  g    amp amp              replace   lt  g    amp lt              replace   gt  g    amp gt              replace    g    amp quot              replace    g    amp  039         function makeTableHTML myArray        var result     lt table border 1 gt        for var i 0  i lt myArray length  i              result      lt tr gt            for var j 0  j lt myArray i  length  j                 k   escapeHtml  myArray i  j                 result      lt td gt   k   lt  td gt                      result      lt  tr gt              result      lt  table gt         return result      Test here with JSFIDDLE - Paste directly from Microsoft Excel to get table

User · Answer

Based on the accepted solution   function createTable  tableData      const table   document createElement  table   appendChild      tableData reduce  tbody  rowData    gt          tbody appendChild          rowData reduce  tr  cellData    gt              tr appendChild              document                createElement  td                  appendChild document createTextNode cellData                         return tr            document createElement  tr                  return tbody        document createElement  tbody           document body appendChild table     createTable       row 1  cell 1    row 1  cell 2        row 2  cell 1    row 2  cell 2        With a simple change it is possible to return the table as HTML element

User · Answer

One-liner using es6 reduce function makeTableHTML ar      return   lt table gt   ar reduce  c  o    gt  c      lt tr gt   o reduce  c  d    gt   c      lt td gt   d  lt  td gt          lt  tr gt         lt  table gt

User · Answer

Pure functional table without new lines  Just for fun   const pureFunctionalTable   data   gt        document createElement  table    filter table   gt   table appendChild          data reduce  tbody  row    gt               tbody appendChild row reduce  tr  cell    gt                   tr appendChild document createElement  td                        appendChild document createTextNode cell      tr                   document createElement  tr                     tbody  document createElement  tbody        table  0       Usage  document body appendChild pureFunctionalTable         row 1  cell 1    row 1  cell 2          row 2  cell 1    row 2  cell 2

User · Answer

See the fiddle demo to create a table from an array   function createTable tableData      var table   document createElement  table      var row         var cell          tableData forEach function rowData        row   table insertRow -1       -1  for last position in Safari     rowData forEach function cellData          cell   row insertCell          cell textContent   cellData                  document body appendChild table       You can use it like this  var tableData      r1c1    r1c2      r2c1    r2c2      r3c1    r3c2     createTable tableData

User · Answer

Here s a version using template literals  It maps over the data creating new arrays of strings build from the template literals  and then adds them to the document with insertAdjacentHTML    x000D   x000D  let data     x000D      Title    Artist    Duration    Created    x000D      hello    me    2    2019    x000D      ola    me    3    2018    x000D      Bob    them    4 3    2006   x000D     x000D   x000D  function getCells data  type    x000D    return data map cell   gt    lt   type  gt   cell  lt    type  gt    join      x000D    x000D   x000D  function createBody data    x000D    return data map row   gt    lt tr gt   getCells row   td    lt  tr gt    join      x000D    x000D   x000D  function createTable data    x000D    const  headings     rows    data  x000D    return   x000D       lt table gt  x000D         lt thead gt   getCells headings   th    lt  thead gt  x000D         lt tbody gt   createBody rows   lt  tbody gt  x000D       lt  table gt  x000D       x000D    x000D   x000D  document body insertAdjacentHTML  beforeend   createTable data    x000D  table   border-collapse  collapse    x000D  tr   border  1px solid  dfdfdf    x000D  th  td   padding  2px 5px 2px 5px   x000D   x000D   x000D

User · Answer

If you don t mind jQuery  I am using this    lt table id  metaConfigTable  gt       lt caption gt This is your target table lt  caption gt       lt tr gt           lt th gt Key lt  th gt           lt th gt Value lt  th gt       lt  tr gt   lt  table gt    lt script gt       function tabelajzing a           takes  key  value  pairs from and array and returns        corresponding html  i e     1 2    3 4    5 6           return             lt tr gt  n lt th gt            a map function  e  i              return e join   lt  th gt  n lt td gt               join   lt  td gt  lt  tr gt  n lt tr gt  n lt th gt               lt  td gt  n lt  tr gt  n          join                  metaConfigTable   find  tr   after        tabelajzing     1 2   3 4   5 6           lt  script gt

User · Answer

I know this is an old question  but for those perusing the web like me  here s another solution   Use replace   on the commas and create a set of characters to determine the end of a row  I just add -- to end of the internal arrays  That way you don t have to run a for function   Here s a JSFiddle  https   jsfiddle net 0rpb22pt 2   First  you have to get a table inside your HTML and give it an id    lt table id  thisTable  gt  lt tr gt  lt td gt Click me lt  td gt  lt  tr gt  lt  table gt    Here s your array edited for this method   thisArray    row 1  cell 1      row 2  cell 2--      row 2  cell 1      row 2  cell 2       Notice the added -- at the end of each array   Because you also have commas inside of arrays  you have to differentiate them somehow so you don t end up messing up your table- adding    after cells  besides the last one in a row  works  If you didn t have commas in your cell  this step wouldn t be necessary though   Now here s your function   function tryit      document      getElementById  thisTable        innerHTML   lt tr gt  lt td gt   String thisArray       replace  --  g   lt  td gt  lt  tr gt  lt tr gt  lt td gt         replace      g   lt  td gt  lt td gt         It works like this    Call your table and get to setting the innerHTML  document getElementById  thisTable   innerHTML Start by adding HTML tags to start a row and data    lt tr gt  lt td gt   Add thisArray as a String     String thisArray  Replace every -- that ends up before a new row with the closing and opening of data and row   replace  --  g   lt  td gt  lt  tr gt  lt tr gt  lt td gt    Other commas signify separate data within rows  So replace all commas the closing and opening of data  In this case not all commas are between rows because the cells have commas  so we had to differentiate those with      replace      g   lt  td gt  lt td gt     Normally you d just do  replace    g   lt  td gt  lt td gt       As long as you don t mind adding some stray characters into your array  it takes up a lot less code and is simple to implement

User · Answer

This is pretty easy to do with a double for loop   function makeTableHTML myArray        var result     lt table border 1 gt        for var i 0  i lt myArray length  i              result      lt tr gt            for var j 0  j lt myArray i  length  j                 result      lt td gt   myArray i  j    lt  td gt                      result      lt  tr gt              result      lt  table gt         return result

User · Answer

An es6 version of Daniel Williams  answer     function get table data        let result      lt table border 1 gt         for let row of data            result push   lt tr gt             for let cell of row               result push   lt td gt   cell  lt  td gt                       result push   lt  tr gt               result push   lt  table gt         return result join   n

[javascript] Generate HTML table from 2D JavaScript array

Examples related to javascript

Examples related to html-table