Suppose we have such an empty HTML table:
<table id="table"></table>
Let's fill this table with rows and columns. Here is an example of what we should obtain:
<table id="table">
<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>
To solve the problem, we need two nested loops. The first loop will create the rows of the table and the second will create the cells in each row:
let table = document.querySelector('#table');
for (let i = 0; i < 3; i++) {
let tr = document.createElement('tr');
for (let i = 0; i < 3; i++) {
let td = document.createElement('td');
tr.appendChild(td);
}
table.appendChild(tr);
}
Given an empty HTML table. Fill this table with
5
rows with 5
columns using two
nested for
loops.
Modify the previous task so that the table
is 10
rows by 5
columns.
Modify the previous task so that the text
'x'
is added to each td
.
Implement a table generator, the width and height
of the tables are given in two inputs (for example,
a table of 5
by 10
cells).