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