JavaScript DOM操作举例 表格
JavaScript DOM操作举例 表格
听那水 发表于3年前
JavaScript DOM操作举例 表格
  • 发表于 3年前
  • 阅读 5
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

摘要: 有时候,在写网页时,有些表格是静态呈现的,但有些,随着与用户的交互,又需要动态添加,这时候,就要用到DOM技术了。不会?请看下面:(动态添加一个表格)

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>


共有 人打赏支持
粉丝 1
博文 9
码字总数 4697
×
听那水
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: