DOM（二）-07-DOM(示例-创建表格)

最新推荐文章于 2023-04-27 12:19:53 发布

wy_0928

最新推荐文章于 2023-04-27 12:19:53 发布

阅读量435

点赞数

分类专栏： No.7-JavaWeb自学笔记（五）——DOM

本文链接：https://blog.csdn.net/wy_0928/article/details/47810535

版权

No.7-JavaWeb自学笔记（五）——DOM 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

表格样式table.css代码

@CHARSET "UTF-8";

table{
	border:##249bdb 1px solid;
	width:500px;
	border-collapse:collapse;	
}

table td{
	border:#249bdb 1px solid;
	padding:5px;/*td左边顶格*/
}

<pre name="code" class="html">主程序代码
<!--
需求：制作表格，让用户自己指定表格的行数和列数，这里先创建一个5行6列的表格。
-->

<!--
思路：
1.明确事件源，比如按钮，即单击按钮就创建一个表格；
2.必须有一个生成的表格节点存储位置，即表格创建后放在页面什么地方；
-->

<!-- 【特别注意】这里是将css样式单独定义成一个css文件，然后在本程序导入即可 -->

<html>
	<head>
		<style type="text/css">
			@import url(table.css);
		</style>
	</head>
	<body>
		<script type="text/javascript">
		
			function createTable(){//定义事件功能
				
				/*
				 * 思路：
				 * 可以通过之前学过的createElement创建元素的形式来完成
				 */
				//1.创建表格节点
				var oTabNode = document.createElement("table");
			
				//2.创建tBody节点
				var tTbodyNode = document.createElement("tbody");
				
				//3.创建行节点tr
				var oTrNode = document.createElement("tr");
				
				//4.创建单元格节点td
				var oTdNode = document.createElement("td");
				
				oTdNode.innerHTML = "这是单元格";
				
				//5.让这些节点有关系，进行指定层次的节点添加
				oTrNode.append(oTdNode);
				
				oTbodyNode.appendChild(oTrNode);
				
				oTabNode.appendChild(oTbodyNode);
				
				//获取div节点，并将已创建的表格加入到div区域
				document.getElementsByTagName("div")[0].append(oTabNode);
				
			}
		
		</script>
		<input type="button" value="创建表格" οnclick="createTable()" />
		
		<hr/>
		
		<div></div>
	</body>
</html>

wy_0928

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM（二）-07-DOM(示例-创建表格)

表格样式table.css代码@CHARSET "UTF-8";table{ border:##249bdb 1px solid; width:500px; border-collapse:collapse; }table td{ border:#249bdb 1px solid; padding:5px;/*td左边顶格*/}主程序代码<!--需求：制作表格
复制链接

扫一扫