在网站开发中，展示数据是非常重要的一件事情。而表格就是一种常见的数据展示方式，它可以将大量的数据以规律的方式呈现出来，使得用户可以快速的查看和对比数据。在 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 代码。只需要简单的几行代码就可以轻松地创建一个美观的表格展示数据。