如何使用javascript将数组值插入HTML表？

Question

我正在尝试使用javascript函数将数组放入HTML表中，但我不知道如何插入此数组？想法是，当我单击“插入”按钮时，它将在一行中添加一个人的信息。This's my table

   <script>
        //Array
        var a = [
            {name:"Micheal", age:20, hometown:"New York"},
            {name:"Santino", age:25, hometown:"Los Angeles"},
            {name:"Fredo",   age:29, hometown:"California"},
            {name:"Hagen",   age:28, hometown:"Long Beach"},
        ]

        //Insert data function
        function Insert_Data() {
          var table = document.getElementById("myTable");
          //Help......  
        }

    </script>

<!--Button Insert-->
    <input type="button" onclick="Insert_Data" value="Insert" /> 
    <!--Table-->
    <table id="myTable">
        <tr>
            <th>Full Name</th>
            <th>Age</th>
            <th>Country</th>
        </tr>

        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>

    </table>

Answer 1

您同时声明thead和tbody并在循环中的函数中填写表格

var a = [
    {name:"Micheal", age:20, hometown:"New York"},
    {name:"Santino", age:25, hometown:"Los Angeles"},
    {name:"Fredo",   age:29, hometown:"California"},
    {name:"Hagen",   age:28, hometown:"Long Beach"},
]

//Insert data function
function Insert_Data() {
  var table = document.getElementById("datas");
  table.innerHTML="";
  var tr="";
  a.forEach(x=>{
     tr+='<tr>';
     tr+='<td>'+x.name+'</td>'+'<td>'+x.age+'</td>'+'<td>'+x.hometown+'</td>'
     tr+='</tr>'

  })
  table.innerHTML+=tr;
  //Help......  
}

<input type="button" onclick="Insert_Data()" value="Insert" /> 
<!--Table-->
<table id="myTable">
    <thead>
       <tr>
        <th>Full Name</th>
        <th>Age</th>
        <th>Country</th>
    </tr>
    </thead>
   <tbody id="datas">

   </tbody>



</table>