10 
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 列，但它不起作用。有谁知道这个问题？？？

4

2 回答 2

33

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

问题是当您使用该innerHTML属性添加 HTML 时，每次更新后，底层引擎都会为您关闭未关闭的标签（并修复其他不良 HTML）。所以在第二行之后，<table>and<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;

小提琴

方法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);

小提琴

方法 2 增强 （更好的方法）

使用CSS而不是 HTML 属性。后者通常按最新规格折旧。

开始学习 CSS 的一个很好的资源是Mozilla 开发者网络

小提琴

方法3 （漫长的道路，但从长远来看是最好的）

使用jQuery。

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

小提琴

于 2012-12-08T07:40:50.187 回答
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;
于 2012-12-08T07:34:08.777 回答