Make table which have cells 10x10 and every cells have inside number from 1 to 100

user_19163646 0
Viewed 65

Need to make table which have numbers from 1 to 100, and it should be 10x10 cells. I make cells 10x10 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>

html javascript
1 Answers

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>

user_151139100
Related