Question 220735 in Html Question posted in
Some basic documentation can be found here.

Html – How to I create and iterate through a dynamically generated table in Javascript?

I want to create a table and number it from the top left to the buttom right. So far I have this code:

function generateTable() {
  const tbl = document.createElement("table"); // Creates the table element
  const tblBody = document.createElement("tbody"); // Creates the table body element

  // creating all cells
  for (let i = 0; i < 2; i++) {
    // creates a table row
    const row = document.createElement("tr");

    for (let j = 0; j < 2; j++) {
      const cell = document.createElement("td");
      row.appendChild(cell);
    }

    tblBody.appendChild(row);
  }
  
  for (var k = 0, cell; cell = tbl.cells[k]; k++)
    {
        const cellText = document.createTextNode(`cell nr. ${k}`); // The cell should be numbered 'k'
        cell.appendChild(cellText); // Puts the cellText into the cell
    }

  tbl.appendChild(tblBody); // Puts the table body into the table

  document.body.appendChild(tbl); // Puts the talbe into the document body

  tbl.setAttribute("border", "2");
}

However, at the for loop that’s meant to iterate through the cells

for (var k = 0, cell; cell = tbl.cells[k]; k++)
    {
        const cellText = document.createTextNode(`cell nr. ${k}`);
        cell.appendChild(cellText);
    }

I get the error

Uncaught TypeError: Cannot read properties of undefined (reading '0')

What does that error mean? I am quite sure that at this point in the code the table is already created, or not?

Tags:

2

Answers


  1. 0

    The issue is due to your use of tbl.cells[k] – a HTML TableElement does not have a cells property.

    You can fix your issue, and remove the need for 2 separate loops, by setting the text of the cell as you create it:

    function generateTable() {
  const tbl = document.createElement("table");
  const tblBody = document.createElement("tbody");
  tbl.setAttribute("border", "2");
  let cellCounter = 0;

  for (let i = 0; i < 2; i++) {
    const row = document.createElement("tr");

    for (let j = 0; j < 2; j++) {
      const cell = document.createElement("td");
      const cellText = document.createTextNode(`cell nr. ${cellCounter}`);
      cell.appendChild(cellText);
      row.appendChild(cell);
      cellCounter++;
    }

    tblBody.appendChild(row);
  }

  tbl.appendChild(tblBody);
  document.body.appendChild(tbl);
}

generateTable();

    As a side note, the border attribute of the <table> element is deprecated and should not be used. Use CSS to style the table instead.

    Login or Signup to reply.
  2. 0

    you would be wiser to use the JS methods specifically related to tables…
    https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement

    less errors and less code…

    (and the use of css is also preferable…)

    let counter = 0;

const
  tbl     = document.body.appendChild( document.createElement('table')) // Creates  and insert the table element
, tblBody = tbl.createTBody() // Creates and insert the table body element
  ;
for (let i = 0; i < 2; i++)
  {
  const row = tblBody.insertRow();    // creates  and insert table row
  for (let j = 0; j < 2; j++)
    {
    row.insertCell().textContent = `row: ${i}, cell: ${j}, counter: ${++counter}`; // cells...
    } 
  }
    table {
  border-collapse  : separate;  /* no need to use borders on cells */
  border-spacing   : 1px;
  background-color : darkblue;
  margin           : 1em;
  color            : black;
  font-size        : .8rem;
  }
table td {
  background-color : whitesmoke;
  padding          : .2em .6em;
  min-width        : 3.2em;
  text-align       : center;
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search