DOM16---创建/删除指定行数列数

本文链接：https://blog.youkuaiyun.com/zheng0518/article/details/9069641

本文提供了一个使用JavaScript创建、修改和删除表格的示例代码，包括创建指定行列数的表格、删除指定行数和列数的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图所示：

代码如下：

<html>
	<head>
		<title></title>
		<link rel="stylesheet" type="text/css" href="table.css"/>
		<style type="text/css">
			/*@import url(table.css);*/
		</style>
	</head>
	<body>
		<!--
			在页面中创建指定行列数的表格，并且可以删除指定行数列数
		-->
		<script type="text/javascript">
			function creTable()
			{
				//1、创建表格节点
				var oTabNode = document.createElement("table");
				//给table设置id
				//oTabNode.id = "tableId";
				oTabNode.setAttribute("id","tableId");
				
				var rowVal = document.getElementsByName("rownum")[0].value;
				var colVal = document.getElementsByName("colnum")[0].value;
				
				for(var i=1;i<=rowVal;i++)
				{
					var oTrNode = oTabNode.insertRow();
					for(var j=1;j<=colVal;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;
			}
			
			function delRow()
			{
				//先获取表格对象
				var oTabNode = document.getElementById("tableId");
				if(!oTabNode)
				{
					alert("表格不存在！");
					return;
				}
				//获取要删除表格的行数
				var rowVal = document.getElementsByName("delrow")[0].value;
				if(rowVal>=1 && rowVal<=oTabNode.rows.length)
					oTabNode.deleteRow(rowVal-1);
				else
					alert("要删除的行不存在");
			}
			
			//删除列，其实就是删除每一行中同一位置的单元格
			function delCol()
			{
				//先获取表格对象
				var oTabNode = document.getElementById("tableId");
				if(!oTabNode)
				{
					alert("表格不存在！");
					return;
				}
				//获取要删除表格的列数
				var colVal = document.getElementsByName("delcol")[0].value;
				if(colVal>=1 && colVal<=oTabNode.rows[0].cells.length)
				{
					for(var i=0;i<oTabNode.rows.length;i++)
					{
						oTabNode.rows[i].deleteCell(colVal-1);
					}
				}else
				{
					alert("要删除的列不存在");
				}
			}
		</script>
		行:<input type="text" name="rownum" />
		列:<input type="text" name="colnum" />
		<input type="button" value="创建表格" name="crtBut" onclick="creTable()" />
		<hr/>
		<input type="text" name="delrow" /><input type="button" value="删除行" onclick="delRow()" /><br />
		<input type="text" name="delcol" /><input type="button" value="删除列" onclick="delCol()" />
		<hr/>
		<div>
		</div>
	</body>
</html>