HTML：使用innerHTML绘制表格 [英] HTML : draw table using innerHTML

问题描述

  document.getElementById（outputDiv）。innerHTML =; 
 document.getElementById（outputDiv）。innerHTML + =< table border = 1 width = 100％>< tr>; （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> 标签会自动关闭，那只会写在表格外面。

---

方法1
简单的方法）

使用一个字符串来存储整个表格的HTML并一次全部更新。

  var HTML =< table border = 1 width = 100％>< tr>; （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.setAttribute（'border'，'1'）; 
 table.setAttribute（'width'，'100％'）
 var row = table.insertRow（0）; （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'）; （j = 1;j≤10; j ++）
（'< td>'）。text（String.fromCharCode（j + 64））。appendTo（'tr'）; 
  

小提琴

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???

解决方案

I ran into this problem years ago, too.

The problem is that when you use the innerHTML property 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.

---

Method 1 (The easy way)

Use a string to store the HTML for the whole table and update it all at once.

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)

Use DOM functions

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

---

Method 2 enhanced (The yet better way)

Use CSS instead of HTML attributes. The latter is generally depreciated as of latest specs.

A great resource to start learning CSS is the Mozilla Developer Network

Fiddle

---

Method 3 (The long way, but the best in the long-run)

Use jQuery.

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

Fiddle

这篇关于HTML：使用innerHTML绘制表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！