Как создать HTML-таблицу, используя модель DOM, используя JavaScript?

Question

Как создать HTML-таблицу, используя модель DOM, используя Javascript?

Например:

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

У меня есть таблица выше, и я хочу визуализировать таблицу выше, как показано ниже, используя модальное создание.

<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, поскольку ни appendChild, ни innerHTML не подходят для безопасной манипуляции между браузерами.

В DOM есть insertRow и insertCell, которые работают лучше.

Вот документация IE , а вот пример из 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>

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