Question

我试图将从文件中读取的数据显示到网站中。我希望它被格式化为一个表格。以下是设置表标题的代码：

let table = document.getElementById("outputTable");
table.innerHTML = `<thead><tr>`;
for(const attribute in student_sample){
     table.innerHTML += `<th>${attribute}</th>`;
}
table.innerHTML += `</thead></tr>`

但是，它不是创建带有标题的表行，而是创建MULTIPLE行，每行包含一个标题。它一个接一个地堆叠标题，而不是将它们排成一行。有什么方法可以克服这个错误？代码可以工作，但它只是格式化不好。

Answer 1

你不能只向DOM table.innerHTML = '<thead><tr>';添加开始标记 - 如果浏览器发出innerHTML它会创建一个无效的DOM，即使你的下一行代码解决了这个问题。

而是创建一个string，并在table.innerHTML完成时将其应用到let table = document.getElementById("outputTable"); let tr = '<thead><tr>'; for(const attribute in student_sample){ tr += `<th>${attribute}</th>`; } tr += '</tr></thead>' table.innerHTML = tr：

thead

会奏效。

您的代码遇到的另一个问题是您以错误的顺序关闭了tr和for names, group in df_group: print(str(names)) Traceback (most recent call last): File "<stdin>", line 1, in <module> TypeError: 'int' object is not iterable。

Answer 2

直接创建元素并分配 text 更安全，更优雅，而不是将文本插入到稍后将被解析为HTML的字符串中。我只在你给要插入的HTML字符串时才使用innerHTML，但我认为你不应该在没有必要时尝试创建一个。

尝试这样的事情：

// theads are created automatically:
const thead = document.querySelector('#outputTable > thead');
Object.keys(student_sample).forEach(attribute => {
  thead.appendChild(document.createElement('tr'))
    .textContent = attribute;
})

Answer 3

您需要createElement创建node到表thead然后您appendChild创建head内的元素然后tr对于循环中的每个attr创建一个元素并将其附加到innerHTML

因此，您不需要添加let table = document.getElementById("outputTable"); let head = document.createElement("thead"); let row = head.appendChild("tr"); for(const attribute in student_sample){ let th = document.createElement("th"); th.appendChild(${attribute}); row.appendChild(th); }文本，它会创建节点并添加它们。如果您的代码变得更加复杂，它可以提供更多帮助。

class B: A {
    override func clear() {}
}

使用for循环时为什么表格格式错误？

3 个答案: