Need to make table which have numbers from 1 to 100, and it should be 10×10 cells. I make cells 10×10 but result fill every grid line from 1 to 10, how to make every line like that 1 to 10, 11 to 20 and to 100 like that ? Thank you for attention to my problem.
function generate_table() {
const tbl = document.createElement("table");
const tblBody = document.createElement("tbody");
for (let i = 1; i < 11; i++) {
const row = document.createElement("tr");
for (let j = 0; j < 10; j++) {
const cell = document.createElement("td");
const cellText = document.createTextNode(i);
cell.appendChild(cellText);
row.appendChild(cell);
}
tblBody.appendChild(row);
}
tbl.appendChild(tblBody);
document.body.appendChild(tbl);
tbl.setAttribute("border", "1");
}<form action="#"> <input type="button" value="Generate a table" onclick="generate_table()"> </form>
Advertisement
Answer
function generate_table() {
const tbl = document.createElement("table");
const tblBody = document.createElement("tbody");
for (let y = 0; y < 10; y++) {
const row = document.createElement("tr");
for (let x = 0; x < 10; x++) {
const cell = document.createElement("td");
const cellText = document.createTextNode((x + 10 * y) + 1);
cell.appendChild(cellText);
row.appendChild(cell);
}
tblBody.appendChild(row);
}
tbl.appendChild(tblBody);
document.body.appendChild(tbl);
tbl.setAttribute("border", "1");
}<form action="#"> <input type="button" value="Generate a table" onclick="generate_table()"> </form>