javascript - HTML : draw table using 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 列的图，但它不起作用。 有人知道这个问题吗？？？

Answer 1

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

问题是当您使用innerHTML时属性来添加 HTML，每次更新后，底层引擎都会为您关闭未关闭的标签(并修复其他错误的 HTML)。所以在第二行之后，<table>和<tr>标签会自动关闭，之后的所有内容都将写入表格之外。

<小时/>

方法1 (最简单的方法)

使用字符串存储整个表格的 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

<小时/>

方法2 (更好的方法)

使用 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);

Fiddle

<小时/>

方法 2 增强 (更好的方法)

使用CSS而不是 HTML 属性。通常不鼓励使用 HTML 属性进行样式设置。

开始学习 CSS 的一个很好的资源是 Mozilla Developer Network

Fiddle

<小时/>

方法3 (路很长，但从长远来看是最好的替代方案)

更新:距离我写这个答案已经过去了 10 多年，同时 webdev 场景也发生了很大变化。因为这个答案仍然偶尔会得到赞成，所以我写这篇文章是为了告诉任何偶然发现这个问题的人，在任何地方使用 jQuery 不再被认为是最佳实践。上面的方法 2(又名 Vanilla)对于小型/一次性/学习项目来说已经足够好了，在了解了优缺点后，应该有意识地选择是使用 Vanilla 还是 jQuery 或者框架。

使用jQuery .

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

Fiddle