使用简单的HTML DOM打印表格的单元格,可以通过以下步骤实现:
<table>
标签创建一个表格元素。<thead>
标签创建表格的表头部分,并使用<tr>
标签创建表头行。<th>
标签创建表头单元格,并在其中添加表头文本。<tbody>
标签创建表格的表体部分,并使用<tr>
标签创建表体行。<td>
标签创建表体单元格,并在其中添加表体文本。appendChild()
方法将表头和表体添加到表格元素中。appendChild()
方法将表格元素添加到HTML页面中的适当位置。下面是一个示例代码,演示如何使用简单的HTML DOM打印表格的单元格:
<!DOCTYPE html>
<html>
<head>
<title>Print Table Cells using HTML DOM</title>
</head>
<body>
<script>
// 创建表格元素
var table = document.createElement("table");
// 创建表头部分
var thead = document.createElement("thead");
var headerRow = document.createElement("tr");
// 创建表头单元格并添加文本
var headerCell1 = document.createElement("th");
headerCell1.textContent = "Header 1";
headerRow.appendChild(headerCell1);
var headerCell2 = document.createElement("th");
headerCell2.textContent = "Header 2";
headerRow.appendChild(headerCell2);
thead.appendChild(headerRow);
// 创建表体部分
var tbody = document.createElement("tbody");
var bodyRow = document.createElement("tr");
// 创建表体单元格并添加文本
var bodyCell1 = document.createElement("td");
bodyCell1.textContent = "Cell 1";
bodyRow.appendChild(bodyCell1);
var bodyCell2 = document.createElement("td");
bodyCell2.textContent = "Cell 2";
bodyRow.appendChild(bodyCell2);
tbody.appendChild(bodyRow);
// 将表头和表体添加到表格中
table.appendChild(thead);
table.appendChild(tbody);
// 将表格添加到HTML页面中
document.body.appendChild(table);
</script>
</body>
</html>
以上代码会在页面中创建一个包含表头和表体的简单表格,并打印出两个单元格。你可以根据需要修改表格的结构和内容。
姓名 | 性别 | 年龄 |
---|---|---|
汤高 | 男 | 20 |