gpt4 book ai didi

javascript - HTML : draw table using innerHTML

转载 作者:太空狗 更新时间:2023-10-29 13:54:50 25 4
gpt4 key购买 nike

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 列,但它不起作用。有人知道这个问题吗???

最佳答案

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

问题是当你使用 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);

Fiddle


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

使用CSS而不是 HTML 属性。根据最新规范,后者通常已折旧。

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

Fiddle


方法三(路途遥远,但从长远来看是最好的)

使用jQuery .

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

Fiddle

关于javascript - HTML : draw table using innerHTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13775519/

25 4 0