Create table rows with Javascript

Question

I'm new to Javascript and learn about querySelector(), createElement(), setAttribute and loop. I try to create a table with a row, which contains 5 cells in it.

Imagine I create in HTML file. I use following code to execute my idea:

// 1. select id = pixelCanvas and store in var table.
const table = document.querySelector('#pixelCanvas');

// 2. create table row element <tr></tr> and append to var table.
table.appendChild(document.createElement('tr'));

// 3. create element table data and store in var data.
const data = document.createElement('td');

// 4. set html attribute with class="cell", width: 20px & height: 20px for table data
data.setAttribute('style', 'width: 20px; height: 20px:');

// 5. use for loop and appendChild() to append 5 <td></td> to <tr></tr>
for (i = 0; i < 5; i++) {
    let tblRow = document.querySelector('tr');
    tblRow.appendChild(data);
};

Here is the result in HTML page.

Obviously my idea doesn't work as expected. Appreciate your advice: where goes wrong?

Please visit the help center, take the tour to see what and How to Ask. Do some research, search for related topics on SO; if you get stuck, post a minimal reproducible example of your attempt, noting input and expected output using the [<>] snippet editor. — mplungjan
– mplungjan, Commented Sep 15, 2020 at 11:44

Mister Jojo · Accepted Answer · 2020-09-15 12:09:04Z

1

prefer to use css to style attributes.
there is also js methods for tables :

const myTable = document.querySelector('table#pixelCanvas')

for (let r=0;r<5;++r) {
  let row = myTable.insertRow()
  for (c=0;c<5;++c) {
    row.insertCell().textContent = `${r}.${c}`
  }
}

table#pixelCanvas {
  border-collapse: collapse;
  font-size: 9px;
}
table#pixelCanvas td {
  padding: 5px;
  width: 20px;
  height: 20px;
  border: 1px solid black;
}

<table id="pixelCanvas"></table>

answered Sep 15, 2020 at 12:09

Mister Jojo

22.9k6 gold badges27 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Luke Storry · Accepted Answer · 2020-09-15 11:58:00Z

Your code is very close to working - you just need to create a seperate td element for each iteration of the for loop, and setting the style attribute is much easier when done via the .style property of the element.

Also instead of trying to query for the row you have just created, you can use the return value of the createElement function - it will give you the variable containing the new element.

See this snippet:

const table = document.querySelector('#pixelCanvas');

const colors = ["red", "orange", "green", "blue", "purple"];

const row = document.createElement('tr');
table.appendChild(row);

for (i = 0; i < 5; i++) {
  const cell = document.createElement('td');
  cell.style.width = "20px";
  cell.style.height = "20px";
  cell.style.backgroundColor = colors[i];
  row.appendChild(cell);
};

<table id="pixelCanvas"></table>

thanks a lot. Now I know I must create element <td></td> in every loop and append it to row.

mplungjan · Accepted Answer · 2020-09-15 13:55:57Z

You mean this

Move the row outside the loop and if you need the cells to be the same, clone the one you made - you also had a typo in it (colon instead of semicolon)

I would also target the tbody since a table should have such a thing

const table = document.querySelector('#pixelCanvas tbody');

const data = document.createElement('td');
data.setAttribute('style', 'width: 20px; height: 20px;');
let tblRow = document.createElement('tr');
for (let i = 0; i < 5; i++) {
  let cell = data.cloneNode(true)
  cell.textContent = i;
  tblRow.appendChild(cell);
}
table.appendChild(tblRow);

<table id="pixelCanvas">
  <thead>
  </thead>
  <tbody>
  </tbody>
</table>

Result

<table id="pixelCanvas">
  <thead>
  </thead>
  <tbody>
    <tr>
      <td style="width: 20px; height: 20px;">0</td>
      <td style="width: 20px; height: 20px;">1</td>
      <td style="width: 20px; height: 20px;">2</td>
      <td style="width: 20px; height: 20px;">3</td>
      <td style="width: 20px; height: 20px;">4</td>
    </tr>
  </tbody>
</table>

Collectives™ on Stack Overflow

Create table rows with Javascript

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related