javascript - 如何使用标题和标签更好地格式化我的 HTML 表

Question

我将如何修改我的代码(如下)以将表格元素(以红色圈出)转换为带有标题的表格，然后在每列上方添加标题(“负载”和“kWh”)左侧和右侧分别列？

除了表格上方的标题“用电量”之外，我还想为其创建标签(“负载”和“kWh”)元素“名称”和“瓦特”。目前，还没有格式化，我在从 W3 学校的教程转到我的代码时遇到了困难。

function(){
        var wrapper = document.createElement("div");
        if(!this.loaded) {
                wrapper.innerHTML = "Loading...";
                return wrapper;
        }
        if(this.xml !== null){
         var table = document.createElement("table");
         table.classList.add("xsmall", "table");
         var channels = this.xml.getElementsByTagName("channel");

         for(var i = 0; i < channels.length; i++){
           var row = document.createElement("tr");
           for(var n = 0; n < channels[i].children.length; n++){
                if(channels[i].children[n].tagName === "name" || channels[i].children[n].tagName === "watts"){
                var element = document.createElement("td");
                element.classList.add(channels[i].children[n].tagName);
                if (channels[i].children[n].textContent != 0){
            element.innerHTML = channels[i].children[n].textContent;
            row.appendChild(element);
            table.appendChild(row);
            }      
        else {
            table.removeChild(row); }
        }


           }
         }
         wrapper.appendChild(table);
        } else {
                console.log("Returned no Data");
                wrapper.innerHTML = "NO DATA";
        }
        return wrapper;
   },

第一次尝试:

Answer 1

您只想使用您已经编写的 JS 构建一个类似于以下内容的表:

<table>
  <caption>Put title here</caption>
  <thead>
    <tr>
      <th>Load</th>
      <th>kWh</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Kitchen Lights</td>
      <td>2.799</td>
    </tr>
  </tbody>
</table>