JavaScript Create Table From Array

This JavaScript code snippet helps you to create an HTML table from an array. It loops through the array and adds each item to a string variable that holds the HTML code for the table. The resulting HTML table is then inserted into an element with the ID “container” on the page. The code includes examples of how to add functionality to each cell using onclick events, including passing a parameter or a running number.

How to Create Table From Array in JavaScript

First of all, create a div element with an id attribute of “container” that will hold the table generated through the JavaScript function:

<div id="container"></div>

Add the following CSS in order to style the table. These CSS rules are optional, you can style the table according to your needs.

  html,
  body {
    font-family: arial, sans-serif;
    width: 90%;
    height: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  #container {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  table {
    border-collapse: collapse;
    width: 90%;
    height: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  table tr td {
    border: 1px solid #000;
    padding: 10px;
  }

  table tr:nth-child(odd) {
    background: #f4f4f4;
  }

Finally, add the following JavaScript function to your project:

window.addEventListener("load", function () {
  // (A) DUMMY ARRAY
  var data = [
    "JavaScript",
    "JS Array",

    "concat()",
    "constructor",
    "copyWithin()",
    "entries()",
    "every()",

    "fill()",
    "filter()",
    "find()",
    "findIndex()",
    "forEach()",

    "from()",
    "includes()",
    "indexOf()",
    "isArray()",
    "join()",

    "keys()",
    "length",
    "lastIndexOf()",
    "map()",
    "pop()",

    "prototype",
    "push()",
    "reduce()",
    "reduceRight()",
    "reverse()",

    "shift()",
    "slice()",
    "some()",
    "sort()",
    "splice()",

    "toString()",
    "unshift()",
    "valueOf"
  ];

  // (B) CREATE HTML TABLE STRING
  var perrow = 7, // 7 CELLS PER ROW
    html = "<table><tr>";

  // LOOP THROUGH ARRAY AND ADD TABLE CELLS
  for (var i = 0; i < data.length; i++) {
    // "NORMAL" CELL
    html += `<td>${data[i]}</td>`;

    // CLICK ON CELL TO DO SOMETHING
    // html += `<td onclick="FUNCTION()">${data[i]}</td>`;

    // TO PASS IN A RUNNING NUMBER OR PARAMETER
    // html += `<td onclick="FUNCTION(${i})">${data[i]}</td>`;

    // BREAK INTO NEXT ROW
    var next = i + 1;
    if (next % perrow == 0 && next != data.length) {
      html += "</tr><tr>";
    }
  }
  html += "</tr></table>";

  // (C) ATTACH HTML TO CONTAINER
  document.getElementById("container").innerHTML = html;
});

Code Explanation

• First, an event listener is added to the window object for the “load” event. This means that the code will execute when the page has finished loading.
• A variable data is declared and assigned an array of strings.
• The perrow variable is assigned the value 7.
• A string variable html is declared and initialized to a string containing an opening <table> tag and an opening <tr> tag.
• A for loop is used to iterate over each element of the data array. For each element, a table cell (<td>) is added to the html string using template literals.
• After adding each cell, the code checks if the next cell should start a new row. If the next index is divisible by perrow and is not the last index, a closing </tr> tag and an opening <tr> tag are added to the html string to start a new row.
• Finally, the html string is closed with a closing </tr> tag and a closing </table> tag. The contents of the html string are then added to the HTML element with an id of “container”.

That’s all! hopefully, you have successfully created Javascript Create Table From Array. If you have any questions or suggestions, feel free to comment below.