DOM15---创建表格

最新推荐文章于 2022-06-06 16:56:18 发布

onyas

最新推荐文章于 2022-06-06 16:56:18 发布

阅读量1k

点赞数

分类专栏： DOM 文章标签：创建表格 DOM JavaScript

本文链接：https://blog.csdn.net/zheng0518/article/details/9054545

版权

DOM 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<title></title>
		<link rel="stylesheet" type="text/css" href="table.css"/>
		<style type="text/css">
			/*@import url(table.css);*/
		</style>
	</head>
	<body>
		<!--
			在页面中创建一个5行6列的表格
			1、事件源，比如按钮
			2、必须有一个生成的表格节点存储位置
		-->
		<script type="text/javascript">
			function creTable1()
			{
				/*
					可以通过创建元素的形式来完成
				*/
				//1、创建表格节点
				var oTabNode = document.createElement("table");
				//2、创建tBody节点
				var oTbdNode = document.createElement("tbody");
				//3、创建行节点
				var oTrNode = document.createElement("tr");
				//4、创建列节点
				var oTdNode = document.createElement("td");
				oTdNode.innerHTML = "这是单元格";
				//这些节点还没有关系，进行指定层次的节点添加
				oTrNode.appendChild(oTdNode);
				oTbdNode.appendChild(oTrNode);
				oTabNode.appendChild(oTbdNode);
				//还要获取div节点，然后把table对象放进去
				var oDiv = document.getElementsByTagName("div")[0];
				oDiv.appendChild(oTabNode);
			}
			/*
				上面的方法很麻烦，既然操作的对象是表格，最方便的方法就是使用表格节点对象的方法来完成
				表格是由行组成，表格节点对象中insertRow方法就完成了创建行并添加的动作
				行是由单元格组成，通过tr节点对象的insertCell来完成
			*/
			function creTable2()
			{
				//1、创建表格节点
				var oTabNode = document.createElement("table");
				for(var i=1;i<=5;i++)
				{
					var oTrNode = oTabNode.insertRow();
					for(var j=1;j<=6;j++)
					{
						var oTdNode = oTrNode.insertCell();
						oTdNode.innerHTML = i+"---"+j;
					}
				}
				//还要获取div节点，然后把table对象放进去
				var oDiv = document.getElementsByTagName("div")[0];
				oDiv.appendChild(oTabNode);
				document.getElementsByName("crtBut")[0].disabled = true;
			}
		</script>
		<input type="button" value="创建表格" name="crtBut" οnclick="creTable2()" />
		<hr/>
		<div>
		
		</div>
	</body>
</html>

onyas

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM15---创建表格

/*@import url(table.css);*/  function creTable1() { /* 可以通过创建元素的形式来完成 */ //1、创建表格节点 var oTabNode
复制链接

扫一扫