JavaScript DOM操作举例表格

最新推荐文章于 2025-08-26 22:31:58 发布

weixin_34228387

最新推荐文章于 2025-08-26 22:31:58 发布

阅读量97

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/ListenWater/blog/394876

本文提供了一个使用JavaScript创建HTML表格的示例代码。通过该示例可以了解到如何使用`document.createElement`来创建表格元素，并利用`appendChild`方法将单元格添加到表格中。示例还展示了如何设置表格边框及如何在单元格中插入文本。

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

2019独角兽企业重金招聘Python工程师标准>>>

HTML：

<!DOCTYPE html>
<html>
<head>
<title>JS createTable</title>
</head>

<body>
</body>
<script>
	var myBody = document.getElementsByTagName("body")[0];
	var myTable = document.createElement("table");
	myTable.border = "1";
	for(var j=0;j<2;j++)
	{
		myTr = document.createElement("tr"); 
		for(var i = 0;i<4;i++)
		{
			myTd = document.createElement("td");
			myTr.appendChild(myTd);
		}
		myTable.appendChild(myTr);
	}
	myBody.appendChild(myTable);
	
	TD = document.getElementsByTagName("td");  
	innerText0_0 = document.createTextNode("姓名"); 
	TD[0].appendChild(innerText0_0);
	innerText0_1 = document.createTextNode("张三"); 
	TD[1].appendChild(innerText0_1); 
	innerText0_2 = document.createTextNode("性别"); 
	TD[2].appendChild(innerText0_2); 
	innerText0_3 = document.createTextNode("男"); 
	TD[3].appendChild(innerText0_3); 
	innerText1_0 = document.createTextNode("籍贯"); 
	TD[4].appendChild(innerText1_0); 
	innerText1_1 = document.createTextNode("山东"); 
	TD[5].appendChild(innerText1_1);
	innerText1_2 = document.createTextNode("籍贯"); 
	TD[6].appendChild(innerText1_2); 
	innerText1_3 = document.createTextNode("山东"); 
	TD[7].appendChild(innerText1_3);  
</script>
</html>

转载于:https://my.oschina.net/ListenWater/blog/394876