HTML：使用innerHTML绘制表格

Question

document.getElementById("outputDiv").innerHTML = "";
document.getElementById("outputDiv").innerHTML += "<table border=1 width=100%><tr>";
for(j=1;j<=10;j++)
{
    document.getElementById("outputDiv").innerHTML += "<td align=center>"+String.fromCharCode(j+64)+"</td>";
}
document.getElementById("outputDiv").innerHTML += "</tr></table>";

我想使用Javascript绘制一张表格。我已经按照上面的代码写了，但是我认为它应该画出一行有10列的表格，但是它并没有工作。有人知道这个问题吗？

- Jimmy

Answer 1

我几年前也遇到过这个问题。

问题在于当您使用 innerHTML 属性添加 HTML 时，每次更新后底层引擎都会自动关闭未闭合的标记（并修正其他错误的 HTML），所以在第二行之后，<table> 和 <tr> 标记被自动关闭，此后所有内容都将被写在表格外部。

---

方法一 （简单的方式）

使用字符串来存储整个表格的HTML，并一次性更新它。

var HTML = "<table border=1 width=100%><tr>";
for(j=1;j<=10;j++)
{
    HTML += "<td align=center>"+String.fromCharCode(j+64)+"</td>";
}
HTML += "</tr></table>";
document.getElementById("outputDiv").innerHTML = HTML;

Fiddle

。

---

方法二 （更好的方式）

使用DOM函数

var table = document.createElement('table');
table.setAttribute('border','1');
table.setAttribute('width','100%')
var row = table.insertRow(0);
for(j=1; j<=10; j++){
    var text = document.createTextNode(String.fromCharCode(j+64));
    var cell = row.insertCell(j-1);
    cell.setAttribute('align','center')
    cell.appendChild(text);
}
document.getElementById("outputDiv").appendChild(table);

小提琴

---

方法二增强版 （更好的方式）

使用CSS代替HTML属性进行样式设置。通常不建议使用HTML属性进行样式设置。

学习CSS的绝佳资源是Mozilla开发者网络。

Fiddle

---

方法三 （虽然比较麻烦，但从长远来看是最好的选择 可选方案）

更新：自从我写下这篇答案已经过去了十多年，网络开发场景在此期间发生了很大的变化。因为这篇答案仍然会偶尔获得赞同，所以我写下这篇文章，告知任何看到它的人，到处使用 jQuery 已不再被认为是最佳实践。上面的方法二（即原生 JavaScript）对于小型/临时/学习项目已经足够好了，使用原生 JavaScript、jQuery 或框架应该是在学习其优缺点后做出的有意识的选择。

使用 jQuery。

$('<table>').append('<tr>').appendTo('#outputDiv');
for(j=1; j<=10; j++)
    $('<td>').text(String.fromCharCode(j+64)).appendTo('tr');

小提琴

- TwiNight

---

+1 - 我在想那些未关闭的<table>和<tr>标签是否会导致问题。好知道了。 - Adam Rackis

@Jimmy - 这个答案比我的好多了 - 一定要点赞并接受它。 - Adam Rackis

Answer 2

我认为主要问题在于你的属性没有加引号。

但是在循环中反复更新dom元素的内容几乎总是不明智的做法——每次更新dom内容都会导致浏览器执行一些内部工作，以确保页面布局是最新的。

我建议先在本地构建html字符串，然后在完成时进行最终更新。(当然，一定要确保你的属性已经被引用)

document.getElementById("outputDiv").innerHTML = "";

var newTable = "<table border='1' width='100%'><tr>";
for(j = 1; j <= 10; j++) { //opening braces should always be on the same line in JS
    newTable += "<td align='center'>" + String.fromCharCode(j+64) + "</td>";
}
newTable += "</tr></table>";

document.getElementById("outputDiv").innerHTML = newTable;

- Adam Rackis