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

我将如何修改我的代码（下面）以将table元素（用红色圈起来）变成一个有标题的表，然后分别在左列和右列的每列上方添加标题（“Load”和“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;
   },

function（）{
var wrapper=document.createElement（“div”）；
如果（！this.loaded）{
wrapper.innerHTML=“正在加载…”；
返回包装器；
}
if（this.xml！==null）{
var table=document.createElement（“表”）；
table.classList.add（“xsmall”、“table”）；
var channels=this.xml.getElementsByTagName（“通道”）；
对于（变量i=0；i

第一次尝试：

---

您只需要使用已经编写的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>

把标题放在这里
负载
千瓦时
厨房灯
2.799

注意：如果愿意，您可以省略

thead

和

tbody

，但请确保在第一行使用

th

而不是

td

来指定它是标题。感谢您的回复。我在我的JS中重新创建它时遇到困难。我需要2个标题变量吗<代码>风险值表头和

风险值表头2

？我不知道如何将负荷与千瓦时分开。我将在我的原始帖子中添加一张照片来说明这一点。在循环之前，只需创建一个名为say headerRow的tr元素。然后创建两个th元素，称为say header1和header2。在开始向循环中添加数据之前，先将它们附加到headerRow并将headerRow附加到表中。