How To Fill An HTML Table With Array Data Using 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>
<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:
1 comments:
commentsIn a concert hall, some seats are higher than others, such that a seat can only see the
Replystage 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