javascript 函数不显示 html 表

Question

I tried to make a html table using java script

function CreateTable(data) {
  alert(data);
  /*
  1 - Loop Through Array & Access each value
  2 - Create Table Rows & append to table
  */
  for (var i in data) {
    var row = `<tr>
                    <td>${data[i].Billing_Count}</td>
                    <td>${data[i].Flag_Type}</td>
</tr>
            `
    var table = $("#table-body")
    table.append(row)
  }
}

and my html :

<div id="chartdiv">
  <table id="our-table">
    <thead>
      <tr>
        <th>میزان مصرف</th>
        <th>نوع مشترک</th>
      </tr>
    </thead>
    <tbody id="table-body">

    </tbody>
  </table>
</div>

i used the alert() in my js to see if my data can be read, and it was ok. but still there were no result in my web page and the table-body's div. I also have no specific error

Answer 1

Two issues in your code:

1. You are missing the id symbol ( # ) in the selector, should be $("#table-body") .

2. You have to close the row with </tr> .

Answer 2

You're missing a # in your selector.

$("#table-body") or document.querySelector("#table-body") will fix it.

https://codepen.io/Choppy/pen/eYzLMgL

Answer 3

issue 1: - while creating the row, you missed out the end tr tag

issue 2: - $("table-body") - # symbol was missing.

 function CreateTable(data){ /* 1 - Loop Through Array & Access each value 2 - Create Table Rows & append to table */ for (var i in data){ var row = `<tr> <td>${data[i].Billing_Count}</td> <td>${data[i].Flag_Type}</td> </tr> ` var table = $("#table-body"); table.append(row) } } const data = [{Billing_Count: 'Count1', Flag_Type: 'Flap1'}, {Billing_Count: 'Count2', Flag_Type: 'Flap2'}, {Billing_Count: 'Count2', Flag_Type: 'Flap2'}] CreateTable(data);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="chartdiv"> <table id="our-table"> <thead> <tr> <th>میزان مصرف</th> <th>نوع مشترک</th> </tr> </thead> <tbody id="table-body"> </tbody> </table> </div>