Failed to looping javascript with HTML table

Question

I failed to looping data with javascript and show it inside HTML table, the failed is the data that shown is not right as i expected, the data is outside the table, how to make the data show inside the table

HTML code :

  <table style="border: 1px solid">
    <thead>
      <th>Name</th>
    </thead>
    <tbody>
      <div id="demo"></div>
    </tbody>
  </table>

Javascript code :

      const cars = ["BMW", "Volvo", "Saab", "Ford"];

      let i = 0;
      let text = "";

      for (let i = 0; i < cars.length; i++) {
        text += "<tr> <td>"+ cars[i] + "</td> </tr>";
      }
      document.getElementById("demo").innerHTML = text;

The result : enter image description here

You're creating invalid HTML. Remove the div and give the same id to tbody element. — Teemu
– Teemu, Commented Jun 6, 2022 at 9:28

Mero · Accepted Answer · 2022-06-06 09:30:58Z

2

All table content should be inside cells, your div is in tbody - that's why table drop it out.

In your case - remove div and set his id to <tbody>

<table style="border: 1px solid">
   <thead>
    <th>Name</th>
   </thead>
  <tbody id="demo"></tbody>
</table>

answered Jun 6, 2022 at 9:30

Mero

7739 silver badges20 bronze badges

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

Comments

Pratik Shinde · Accepted Answer · 2022-06-06 09:38:50Z

1

Just do following changes :

 <table style="border: 1px solid">
    <thead>
      <th>Name</th>
    </thead>
    <tbody id="demo"></tbody>
  </table>

edited Jun 6, 2022 at 9:38

answered Jun 6, 2022 at 9:35

Pratik Shinde

213 bronze badges

Collectives™ on Stack Overflow

Failed to looping javascript with HTML table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related