在網站開發中，展示數據是非常重要的一件事情。而表格就是一種常見的數據展示方式，它可以將大量的數據以規律的方式呈現出來，使得用戶可以快速的查看和對比數據。在 JavaScript 中，創建表格是非常容易的，本文將為大家介紹使用 JavaScript 動態創建表格的方法。

在創建表格之前，我們需要先了解一下 table 元素的基本結構。在 HTML 中，table 標簽用于創建表格，其中 tr 標簽用于標識表格的每一行，td 標簽用于標識表格每一行的每一列，示例代碼如下：

<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>

上面的代碼就表示了一個 3 行 3 列的表格，在表格中，第一列的數據是 1、4、7，第二列的數據是 2、5、8，第三列的數據是 3、6、9。

那么，在 JavaScript 中，如何動態地創建一個表格呢？下面是一個示例代碼：

<div id="tableContainer"></div>
<script>
var tableContainer = document.getElementById('tableContainer');
var table = document.createElement('table');
for (var i = 1; i <= 3; i++) {
var tr = document.createElement('tr');
for (var j = 1; j <= 3; j++) {
var td = document.createElement('td');
var text = document.createTextNode(i * j);
td.appendChild(text);
tr.appendChild(td);
}
table.appendChild(tr);
}
tableContainer.appendChild(table);
</script>

上面的代碼中，我們先創建了一個 div 元素作為表格的容器，然后使用 document.createElement() 方法創建一個 table 元素，再通過 for 循環創建表格的行和列。在循環中，我們每次創建一個 tr 和 td 元素，并使用 document.createTextNode() 方法創建了表格單元格中的文本節點。最后將 td 元素添加到 tr 元素中，將 tr 元素添加到 table 元素中，最后將 table 元素添加到容器中就完成了表格的創建。

除了上面的方法，我們還可以使用表格的 innerHTML 屬性動態地創建表格。例如：

<div id="tableContainer"></div>
<script>
var tableContainer = document.getElementById('tableContainer');
var tableHtml = '<table>';
for (var i = 1; i <= 3; i++) {
tableHtml += '<tr>';
for (var j = 1; j <= 3; j++) {
tableHtml += '<td>' + (i * j) + '</td>';
}
tableHtml += '</tr>';
}
tableHtml += '</table>';
tableContainer.innerHTML = tableHtml;
</script>

上面的代碼中，我們先創建了一個 div 元素作為表格的容器，然后使用字符串拼接的方式創建了一個 table 元素的 HTML 代碼。在循環中，我們每次拼接一個 tr 和 td 元素的 HTML 代碼。最后將拼接好的 table 元素的 HTML 代碼通過 innerHTML 屬性設置到容器中就完成了表格的創建。

總結一下，使用 JavaScript 動態創建表格非常的便捷，我們可以使用 createElement() 方法來創建表格的元素，使用 innerHTML 屬性來設置表格的 HTML 代碼。只需要簡單的幾行代碼就可以輕松地創建一個美觀的表格展示數據。