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




Share this

Related Posts

Previous
Next Post »

1 comments:

comments
3 avril 2019 à 16:46 delete

In a concert hall, some seats are higher than others, such that a seat can only see the
stage if the seat in front of it is lower. Your task is to find the seats that can see the stage
and those that cannot.
Task Create a function that determines whether each seat (represented with a number) can
"see" the front-stage. A number can "see" the front-stage if it is strictly greater than the
number before it. For example, consider the following seating arrangement:
// FRONT STAGE
[[1, 2, 3, 2, 1, 1],
[2, 4, 4, 3, 2, 2],
[5, 5, 5, 5, 4, 4],
[6, 6, 7, 6, 5, 5]]
// Starting from the left, 6 > 5 > 2 > 1 , so all numbers can see.
// Similarly, 6 > 5 > 4 > 2 - so all numbers can see, etc.
The function should return true if every number can see the front-stage, and false if
even a single number cannot.
UI Design Your UI design for the concert hall should include the following:
● 36 seats and an input field for each seat
● A button to run the check
● When displaying the result the seats should be arranged as inputted
● Use colour green to indicate compliant seats and red for any defaulting seat

Reply
avatar