DOM 的操作实例二

最新推荐文章于 2024-08-16 06:15:47 发布

kakunaka

最新推荐文章于 2024-08-16 06:15:47 发布

阅读量131

点赞数

分类专栏： DHTML 文章标签：自我学习

DHTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<title>DOM 文档</title>
		<script language="javascript">
			//加载数据
			function loadDatas(){
				//创建一个H3对象
				var h3 = document.createElement("h3");
				//设置属性 对齐方式
				h3.setAttribute("align","center");
				//H3文本对象
				var h3Text = document.createTextNode("DOM Document Object Model");
				h3.appendChild(h3Text);
				//添加至body对象中
				document.body.appendChild(h3);

				//创建HR水平线
				var hr = document.createElement("hr");
				document.body.appendChild(hr);

				//创建表格对象
				var table = document.createElement("table");
				table.setAttribute("align","center");
				table.setAttribute("width","50%");
				table.setAttribute("border",1);

				//添加至body对象中
				document.body.appendChild(table);

				//表格对象添加caption对象
				var caption = table.createCaption();
				caption.appendChild(document.createTextNode("Student Infomation"));

				//创建列标题对象
				var head = table.createTHead();
				//列标题行
				var headRow = head.insertRow(0);
				headRow.setAttribute("align","center");
				headRow.setAttribute("bgColor","#bbbddd");
				//列标题行对象 创建单元格对象
				var firstCell = headRow.insertCell(0);
				firstCell.appendChild(document.createTextNode("ID"));
				//等价于
				headRow.insertCell(1).appendChild(document.createTextNode("NAME"));
				headRow.insertCell(2).appendChild(document.createTextNode("Grade"));
				headRow.insertCell(3).appendChild(document.createTextNode("Class"));

				var firstRow = table.createTHead();
				var row1 = firstRow.insertRow(1);
				row1.insertCell(0).appendChild(document.createTextNode("1001"));
				row1.insertCell(1).appendChild(document.createTextNode("张 三"));
				row1.insertCell(2).appendChild(document.createTextNode("S2"));
				row1.insertCell(3).appendChild(document.createTextNode("T203"));

				var secondRow = table.createTHead();
				var row2 = secondRow.insertRow(2);
				row2.insertCell(0).appendChild(document.createTextNode("1002"));
				row2.insertCell(1).appendChild(document.createTextNode("李 四"));
				row2.insertCell(2).appendChild(document.createTextNode("S1"));
				row2.insertCell(3).appendChild(document.createTextNode("T107"));

				var thirdRow = table.createTHead();
				var row3 = firstRow.insertRow(3);
				row3.insertCell(0).appendChild(document.createTextNode("1003"));
				row3.insertCell(1).appendChild(document.createTextNode("王 五"));
				row3.insertCell(2).appendChild(document.createTextNode("Y2"));
				row3.insertCell(3).appendChild(document.createTextNode("T316"));
			}
		</script>
	</head>
	<body onLoad="loadDatas()">

	</body>
</html>