在JavaScript中，与DOM（文档对象模型）结合来动态创建表格是一项常见的任务。以下是一个简单的示例，展示了如何使用JavaScript来创建一个表格，并向其中添加一些行和列。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态创建表格</title>
</head>
<body>
<div id="table-container"></div>
<script>
// 获取div元素，用于在其中插入表格
var container = document.getElementById('table-container');
// 创建一个table元素
var table = document.createElement('table');
table.border = 1; // 设置表格边框（可选）
// 创建表格头部（thead）
var thead = document.createElement('thead');
// 创建表头行（tr）
var headerRow = document.createElement('tr');
// 创建表头单元格并添加内容
['ID', '姓名', '年龄'].forEach(function(headerText) {
var th = document.createElement('th');
th.textContent = headerText;
headerRow.appendChild(th);
});
// 将表头行添加到表头
thead.appendChild(headerRow);
// 将表头添加到表格
table.appendChild(thead);
// 假设我们要添加3行数据
for (var i = 1; i <= 3; i++) {
// 创建表格行（tbody中的tr）
var row = document.createElement('tr');
// 假设每行有3列数据
['ID' + i, '姓名' + i, '年龄' + (i * 10)].forEach(function(cellText) {
var td = document.createElement('td');
td.textContent = cellText;
row.appendChild(td);
});
// 假设我们直接将行添加到表格（不特别创建tbody）
table.appendChild(row);
}
// 将表格添加到div容器中
container.appendChild(table);
</script>
</body>
</html>
在这个例子中，我们首先创建了一个`table`元素，然后添加了一个`thead`和一个`tr`元素来构成表格的头部，并为头部单元格添加了文本内容。接着，我们通过一个循环来创建表格的每一行（`tr`），并为每行添加了三个单元格（`td`），每个单元格包含一些示例数据。最后，我们将整个表格添加到了页面上的一个`div`元素内。
请注意，为了简化示例，我们没有特别创建一个`tbody`元素来包含表格的行。在实际应用中，如果表格包含多行数据，最好将行添加到`tbody`中，然后再将`tbody`添加到`table`中。不过，省略`tbody`在HTML5中也是有效的，并且浏览器会隐式地创建它。