Javascript HTML : 使用innerHTML绘制表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13775519/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML : draw table using innerHTML
提问by Jimmy
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>";
I want to draw a table using Javascript. So I wrote the code like above. I think it draw one row that has 10 columns, but it doesn't work. Anyone know about this problem???
我想使用 Javascript 绘制表格。所以我写了上面的代码。我认为它绘制一行有 10 列，但它不起作用。有谁知道这个问题？？？
回答by TwiNight
I ran into this problem years ago, too.
几年前我也遇到过这个问题。
The problem is that when you use the innerHTMLproperty to add HTML, after each update, the underlying engine will close unclosed tag (and fix other bad HTML) for you. So after the second line, the <table>and <tr>tags are automatically closed and all content after that will just be written outside the table.
问题在于，当您使用该innerHTML属性添加 HTML 时，每次更新后，底层引擎都会为您关闭未关闭的标签（并修复其他不良 HTML）。所以在第二行之后，<table>和<tr>标签会自动关闭，之后的所有内容都将被写入表格之外。
Method 1(The easy way)
方法一（最简单的方法）
Use a string to store the HTML for the whole table and update it all at once.
使用字符串来存储整个表格的 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
? 小提琴
Method 2(The better way)
方法2（更好的方法）
Use DOM functions
使用 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);
Method 2 enhanced(The yet better way)
方法 2 增强（更好的方法）
Use CSSinstead of HTML attributes. The latter is generally depreciated as of latest specs.
使用CSS而不是 HTML 属性。后者通常按最新规格折旧。
A great resource to start learning CSS is the Mozilla Developer Network
开始学习 CSS 的一个很好的资源是Mozilla 开发者网络
Method 3(The long way, but the best in the long-run)
方法 3（路漫漫其修远兮，但从长远来看是最好的）
Use jQuery.
使用jQuery。
$('<table>').append('<tr>').appendTo('#outputDiv');
for(j=1; j<=10; j++)
$('<td>').text(String.fromCharCode(j+64)).appendTo('tr');
回答by Adam Rackis
I think the main problem is that your attributes are not quoted.
我认为主要问题是您的属性没有被引用。
But it's almost always a bad idea to repeatedly update the content of a dom element in a loop—each time you update dom content it causes some internal work to be done by the browser to make sure the page layout is current.
但是，在循环中重复更新 dom 元素的内容几乎总是一个坏主意——每次更新 dom 内容都会导致浏览器完成一些内部工作以确保页面布局是最新的。
I would build the html string up locally, then make one final update when done. (and of course make sure your attributes are quoted)
我会在本地构建 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;
