JavaScript入门（五）操作表格

最新推荐文章于 2022-07-25 09:47:04 发布

多则惑少则明

最新推荐文章于 2022-07-25 09:47:04 发布

阅读量577

点赞数

CC 4.0 BY-SA版权

分类专栏：【测试】系列【技术】JavaScript/python/shell

本文链接：https://blog.csdn.net/huazhongkejidaxuezpp/article/details/45958611

【测试】系列同时被 2 个专栏收录

162 篇文章

订阅专栏

【技术】JavaScript/python/shell

45 篇文章

订阅专栏

本文介绍了一个使用DOM（文档对象模型）来创建和操作HTML表格的具体示例。通过JavaScript代码动态生成了一个包含标题、表头、主体及表尾的表格，并展示了如何设置表格的基本属性如宽度和边框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<title>DOM文档对象模型 --操作表格和样式</title>

<script>
//thead, tfoot 只能有一个
//tbody可以有多个

//使用DOM创建表格

window.onload=function(){
var table = document.createElement('table');
table.width=300;//table.setAttribute('width',300);
table.border=1;
var caption=document.createElement('caption');
table.appendChild(caption);
caption.innerHTML='人员表';
var captionText=document.createTextNode('人员表');
caption.appendChild(captionText);

var thead=document.createElement('thead');
table.appendChild(thead);

var tr=document.createElement('tr');
thead.appendChild(tr);

var th=document.createElement('th');
tr.appendChild(th);

th.appendChild(document.createTextNode("数据1"));
th.appendChild(document.createTextNode("数据2"));


document.body.appendChild(table);
}

</script>

</head>

<body >
	<table border='1' width='300'>
		<caption>人员表</caption>
		<thead>
			<tr>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>张三</th>
				<th>男</th>
				<th>22</th>
			</tr>
			<tr>
				<th>李四</th>
				<th>男</th>
				<th>22</th>
			</tr>
		</tbody>
				<tbody>
			<tr>
				<th>王五</th>
				<th>男</th>
				<th>22</th>
			</tr>
			<tr>
				<th>人六</th>
				<th>男</th>
				<th>22</th>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan='3'>合计：2人</td>
			</tr>
		</tfoot>

	</table>


</body>
</html>