Как вставить значения массива в таблицу HTML с помощью javascript?

Question

Я пытаюсь поместить массив в таблицу HTML с функцией javascript, но я не знаю, как вставить этот массив? Идея заключается в том, что, когда я нажимаю кнопку Вставить, он добавляет информацию об одном человеке в строку. Это мой стол

   <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 и в функции в l oop заполните таблицу

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>

Answer 2

Для динамических c таблиц, если вы собираетесь часто менять свой массив

let tableBody = a.reduce((rows, nextRow) =>{
                return rows += 
                    '<tr>' + 
                    Object.keys(nextRow).reduce((cols, nextCol) => { 
                        return cols += '<th>' + nextRow[nextCol] + '</th>'
                    }, '') + 
                    '</tr>'
            }, '')

Answer 3

Демо-версия: https://jsfiddle.net/psw41g6k/

function Insert_Data() {
         var table = document.getElementById("myTable");
         var rows = table.querySelectorAll('tr');
         console.log(rows)
         for (let i = 1; i < rows.length; i++) {
           rows[i].children[0].textContent = a[i-1].name
           rows[i].children[1].textContent = a[i-1].age
           rows[i].children[2].textContent = a[i-1].hometown
         }

       }

Answer 4

Это совершенно обобщенный метод c, вы можете добавить новый ключ и добавить новый столбец к данным, без проблем:

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

//get references to the table and the head and body:
const myTable = document.getElementById('myTable');
const myTable_header = myTable.querySelector('thead')
const myTable_body = myTable.querySelector('tbody')

//Insert data function
function Insert_Data() {
  //Help...... :
  myTable_header.innerHTML = '';
  var tr = document.createElement('tr');
  const headers_data = Object.keys(myData[0]);
  headers_data.forEach((key) => {
    var th = document.createElement('th')
    th.innerHTML = key
    tr.appendChild(th);
  })
  myTable_header.appendChild(tr);
  myTable_body.innerHTML = '';
  for (let i = 0; i < myData.length; i++){
    var tr = document.createElement('tr');
    headers_data.forEach((key) => {
      var td = document.createElement('td');
      td.innerHTML = myData[i][key]
      tr.appendChild(td);
    });
    myTable_body.appendChild(tr);
  }
}

<!--Button Insert-->
<input type="button" onclick="Insert_Data()" value="Insert" /> 
<!--Table-->
<table id="myTable">
  <thead>
    <!-- Data is injected here -->
  </thead>
  <tbody>
    <!-- Data is injected here -->
  </tbody>
</table>

Answer 5

Создайте динамический c элемент tr и td одним нажатием кнопки и добавьте его к элементу таблицы в документе.

Используйте https://www.w3schools.com/jsref/met_node_appendchild.asp в качестве справки, чтобы понять, как создать динамический c элемент.