DOM（二）-09-(示例-创建表格-指定行列)

最新推荐文章于 2023-03-12 00:00:00 发布

wy_0928

最新推荐文章于 2023-03-12 00:00:00 发布

阅读量604

点赞数

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

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

版权

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左边顶格*/
}

主程序代码：

<!--
前一个视频讲解了如何创建5行6列的表格，那么这里需要再次升级，即由用户指定表格的行和列
-->


<html>
	<head>
		<style type="text/css">
			@import url(table.css);
		</style>
	</head>
	<body>
		<script type="text/javascript">
		
			function createTable(){
				
				var oTabNode = document.createElement("table");
				
/*获取用户在文本框中输入的行和列，为保险起见，用parseInt将获取到的字符串转成整数，因为用户在文本框输入5，这个5100%是字符串*/
				var rowVal = parseInt(document.getElementsByName("rownum")[0].value);
				var colVal = parseInt(document.getElementsByName("colnum")[0].value);//value是input的一个属性
//在获取用户输入的行和列之前，通常需要做健壮性判断，比如用户输入的值必须在一个范围之内
				
				for(var x=1;x<=rowVal;x++){
					
					var oTrNode = oTabNode.insertRow();
					
					for(var y=1;y<=colVal;y++){
												
					var oTdNode = oTrNode.insertCell();
				
					oTdNode.innerHTML = x + "--" + y;
					
					}
					
				}
				
				document.getElementsByTagName("div")[0].appendChild(oTabNode);
				
				document.getElementsByName("crtBut")[0].disabled = true;
				
			}
		
		</script>
		
		<!-- 设置输入文本框，由用户指定行和列 -->
		
		行：<input type="text" name="rownum"> 列：<input type="text" name="colnum">
		
		<input type="button" value="创建表格"  name="crtBut" οnclick="createTable()" />
		
		<hr/>
		
		<div></div>
	</body>
</html>

wy_0928

关注

0
点赞
踩
0

收藏

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

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

扫一扫