使用Javascript創建復雜的表體結構

Question

有人能告訴我如何使用下面的函數創建這個表嗎？

<tbody>
 <tr>
  <td><h3>Main1</h3></td>
  <td>
    <h5>
      text1
    </h5>
  </td>
  <td>
    <h5>
     text2
    </h5>
  </td>
 </tr>
 <tr>
   <td><h3>Main2</h3></td>
   <td>
    <h5>
      text3
    </h5>
   </td>
   <td>
    <h5>
      text4
    </h5>
   </td>
 </tr>
</tbody>

這是我的數據和我的功能。 我只能創建一個沒有內部h3, h5 tags的表。

data =[['Main1', 'text1', 'text2'],['Main2', 'text3', 'text4']]

  var table = document.getElementsByTagName("tbody")[0];
      table.innerHTML = ""; 
      for (var i = 0; i < data.length; i++) {
        var child = data[i];
        var row = table.insertRow();
        Object.keys(child).forEach(function (k) {
          var cell = row.insertCell();
          cell.appendChild(document.createTextNode(child[k]));

Answer 1

嘗試使用 javascript 字符串插值：

 data =[['Main1', 'text1', 'text2'],['Main2', 'text3', 'text4']] var table = document.getElementsByTagName("tbody")[0]; table.innerHTML = ""; for (var i = 0; i < data.length; i++) { var row = table.insertRow(); row.innerHTML = `<tr><td><h3>${data[i][0]}</h3></td><td>${data[i][1]}</td><td>${data[i][2]}</td></tr>`; }

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

但是這種態度已經過時了，我強烈建議使用像Vue這樣的現代綁定框架