如何使用 javascript 使用 DOM 模型创建 Html 表？答案

【问题标题】：How to create a Html table using DOM model using javascript?如何使用 javascript 使用 DOM 模型创建 Html 表？
【发布时间】：2011-09-30 06:00:28
【问题描述】：

如何使用 Javascript 使用 DOM 模型创建 Html 表？

例如：

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="tblMCNRoles">   
</table>

我有上面的表格，我想通过使用 DOM 模态创建来呈现上面的表格。

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="tblMCNRoles">

<tr>
 <td bordercolor="green" align="center" valign="top" style="border-style:dotted" >
   <table width="99%" border="0" cellspacing="0" cellpadding="0" 
      class="portlet-table-body intable5"> 
      <tr><td align="center" valign="middle" class="grid6"></td></tr>
   </table>
 </td>
</tr>
</table>

【问题讨论】：

标签： javascript html asp.net dom html-table

【解决方案1】：

我建议你使用 DOM Table 方法，因为 appendChild 和 innerHTML 都不适合安全的跨浏览器操作。

DOM 有 insertRow 和 insertCell 效果更好。

这里是IE's documentation，这里是Mozillas Developer Network的一个例子

<table id="table0">
 <tr>
  <td>Row 0 Cell 0</td>
  <td>Row 0 Cell 1</td>
 </tr>
</table>

<script type="text/javascript">

var table = document.getElementById('table0');
var row = table.insertRow(-1);
var cell, text;
for (var i=0; i<2; i++) {
  cell = row.insertCell(-1);
  text = 'Row ' + row.rowIndex + ' Cell ' + i;
  cell.appendChild(document.createTextNode(text));
}

</script>

【讨论】：

MDC 网站上有一个简短的tutorial。
@RobG 这是我发布的同一个链接以及那里的代码

【解决方案2】：

var table = document.getElementById("tblMCNRoles");
var tr = document.createElement("tr");
var td = document.createElement("td");
//set attributes via setAttribute()
//add subtable via createElement and appendCHild
tr.appendChild(td);
table.appendChild(tr);

或者你可以使用innerHTML，但是你必须先生成HTML

【讨论】：