DOM（二）-10-(示例-删除表格的行和列)

最新推荐文章于 2021-06-18 13:42:43 发布

wy_0928

最新推荐文章于 2021-06-18 13:42:43 发布

阅读量620

点赞数

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

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

版权

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

主程序代码

<!--
添加新功能：删除表格的行和列操作
打开DHMTL API文档，找到里面的table对象，其内有方法：

（1）deleteRow：从表格及 rows 集合中删除指定行(tr)。
语法：object.deleteRow( [iRowIndex])
传入角标，删除指定的行 

【特别注意】角标是从0开始的，即表格第一行对应角标0，第二行对应1，第三行对应2……
-->

<html>
	<head>
		<style type="text/css">
			@import url(table.css);
		</style>
	</head>
	<body>
		<script type="text/javascript">
		
			function createTable(){
				
				var oTabNode = document.createElement("table");
				
				//设置表格名称，为了后续删除行和删除列function中先对表格是否存在进行判断
				oTabNode.setAttribute("id","tableid");//该方法类似oTabNode.id = "tableid";

				var rowVal = parseInt(document.getElementsByName("rownum")[0].value);
				var colVal = parseInt(document.getElementsByName("colnum")[0].value);

				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;
				
			}
			
			//定义删除行事件处理办法
			
			function delRow(){
				
				//获取表格对象
				var oTabNode = document.getElementById("tableid");
				
				//先判断表格是否存在，如果不存在，还删除什么东西
				if(oTabNode == null){
					
					alert("表格不存在！");
					return;
				}
				
				//获取要删除的表格的行数
				var rowVal_del = parseInt(document.getElementsByName("delrow")[0].value);
				
				//删除指定的行，这里需要健壮性判断，即判断用户输入的要删除的行是否有效的，即若3行表格，输入的数字是否在1-3之间
				
				if(rowVal_del<=1 && rowVal_del<=oTabNode.rows.length){
				/*
				 *oTabNode是当前被操作的表格节点，其有个属性叫做rows，即拿到所有行，然后lenght是一共有几行
				 */
					
					oTabNode.deleteRow(rowVal_del-1);
				/*
				 *【切记】这里必须减1，符合用户习惯，因为deleteRow方法传入的角标是从0开始计数的。
				 *比如rowVal_del=3，那么3-1=2，所以deleteRow(2)，那么在实际操作中角标2对应的行是第三行，这样
				 *就实现了用户传入几就删除第几行。
				 */
				}else{
					
					alert("要删除的行不存在！");
				}
				
			}
			
			//定义删除列事件处理办法：【特别注意思想】删除列，其实就是删除每一行中同一位置的单元格，因为没有直接删除列的方法
			
			function delCol(){
				
				var oTabNode = document.getElementById("tableid");
				
				if(oTabNode == null){
					
					alert("表格不存在！");
					
					return;
				}
				
				//获取用户输入的数字（要删除的列）
				
				var colVal_del = parseInt(document.getElementsByName("delcol")[0].value);
				
				//删除列操作，既然是删除每行的同一位置的单元格，那么需要先遍历所有行，然后删除同一位置的单元格
				
				//【切记】健壮性判断（理由同上面的删除行function，详情查阅DHTML API文档）
				if(colVal_del>=1 && colVal_del<=oTabNode.rows[0].cells.length){
//oTabNode是当前被操作的表格节点，rows[0]是拿到第一行，cells是拿到该行的所有单元格，length是该行单元格总数，即oTabNode的列数
					
					for(var x=0;x<oTabNode.rows.length;x++){//遍历所有行
						
						oTabNode.rows[x].deleteCell(colVal_del-1);//拿到第x行，删除该行指定单元格
					//调用deleteCell方法删除每行同一位置单元格，【注意】减1
					}
				}else{
					
					alert("要删除的列不存在！");
					
				}
				
			}
		
		</script>
		
		行数：<input type="text" name="rownum" /> 列数：<input type="text" name="colnum" />
		
		<input type="button" value="创建表格" name="crtBut" οnclick="createTable()" />
		
		<hr/>
		
		删除第<input type="text" name="delrow" />行 <input type="button" value="删除行" οnclick="delRow()" /><br/>
		删除第<input type="text" name="delcol" />列 <input type="button" value="删除列" οnclick="delCol()" />
		
		<hr/>
		
		<div></div>
	</body>
</html>