在javascript中创建表
时间: 2024-12-05 21:11:46 浏览: 6
在JavaScript中,你可以使用HTML DOM API来动态创建表格。下面是一个简单的例子展示如何创建一个包含标题行和几行数据的表格:
```javascript
// 创建一个新的table元素
var table = document.createElement('table');
// 创建thead部分(表头)
var thead = document.createElement('thead');
var headerRow = document.createElement('tr'); // 表头行
headerRow.innerHTML = '<th>列1</th><th>列2</th><th>列3</th>'; // 添加表头单元格
thead.appendChild(headerRow);
table.appendChild(thead);
// 创建tbody部分(主体内容)
var tbody = document.createElement('tbody');
var row1 = document.createElement('tr'); // 第一行数据
row1.innerHTML = '<td>数据1</td><td>数据2</td><td>数据3</td>';
tbody.appendChild(row1);
var row2 = document.createElement('tr'); // 第二行数据
row2.innerHTML = '<td>数据4</td><td>数据5</td><td>数据6</td>';
tbody.appendChild(row2);
table.appendChild(tbody);
// 将新创建的表格添加到文档中
document.body.appendChild(table);
```
在这个示例中,我们首先创建了一个`<table>`元素,然后分别创建了thead(表头)、tbody(主体),并设置了它们的内容。最后将整个表格添加到了页面上。
阅读全文