Javascript - Populate HTML Table From Array

How To Fill An HTML Table With Array Data Using JavaScript 

fill an HTML table with array values in JavaScript



In This Javascript Tutorial we will See 2 Way On How To Popuate HTML Table With Array Data With For Loop
1 - display array values into row cells.
2 - add rows and cells with data from array.
In JS And Netbeans Editor .


Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title> Add Rows To HTML Table From Array </title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        
        <table id="table" border="1">
            
            <!-- The Row Number 0 -->
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Age</th>
            </tr>
            <!-- End Row Number 0 -->
            <!--
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            -->
        </table>
        
        <script>
            
            var array = [["A1","B1","C1"],
                         ["A2","B2","C2"],
                         ["A3","B3","C3"],
                         ["A4","B4","C4"],
                         ["A5","B5","C5"],
                         ["A1","B1","C1"],
                         ["A2","B2","C2"],
                         ["A3","B3","C3"],
                         ["A4","B4","C4"],
                         ["A5","B5","C5"]],
                table = document.getElementById("table");
        
        /* Method 1
        // rows
        for(var i = 1; i < table.rows.length; i++)
        {
          // cells
          for(var j = 0; j < table.rows[i].cells.length; j++)
          {
              table.rows[i].cells[j].innerHTML = array[i - 1][j];
          }
        }
            */
           
           // Method 2
           
           for(var i = 0; i < array.length; i++)
           {
               // create a new row
               var newRow = table.insertRow(table.length);
               for(var j = 0; j < array[i].length; j++)
               {
                   // create a new cell
                   var cell = newRow.insertCell(j);
                   
                   // add value to the cell
                   cell.innerHTML = array[i][j];
               }
           }
        </script>
        
    </body>
</html>

OUTPUT:

Populate HTML Table Using Array In Javascript