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列,但它不起作用.任何人都知道这个问题???

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;

小提琴

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

小提琴

Answer 2

我认为主要问题是你的属性没有被引用。

\n\n

但在循环中重复更新 dom 元素的内容几乎总是一个坏主意\xe2\x80\x94每次更新 dom 内容时，都会导致浏览器完成一些内部工作以确保页面布局是当前的。

\n\n

我会在本地构建 html 字符串，然后在完成后进行最后的更新。（当然还要确保你的属性被引用）

\n\n

document.getElementById("outputDiv").innerHTML = "";\n\nvar newTable = "<table border=\'1\' width=\'100%\'><tr>";\nfor(j = 1; j <= 10; j++) { //opening braces should always be on the same line in JS\n    newTable += "<td align=\'center\'>" + String.fromCharCode(j+64) + "</td>";\n}\nnewTable += "</tr></table>";\n\ndocument.getElementById("outputDiv").innerHTML = newTable;\n

\n