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

Question

如何使用 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>

Answer 1

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

DOM 有 insertRow 和 insertCell ，效果更好。

这是 IE 文档来自 Mozillas 开发人员的示例网络

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

Answer 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