【javascript】table对象操作，动态创建，删除指定行列

最新推荐文章于 2019-01-10 16:12:18 发布

Jeep_Dom

最新推荐文章于 2019-01-10 16:12:18 发布

阅读量1.4k

点赞数

分类专栏： Javascript 文章标签： javascript table

本文链接：https://blog.csdn.net/jeep_ouc/article/details/17009353

版权

Javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<script type="text/javascript">
	function createTab(){ //动态创建表格
		var tabNode = document.createElement("table");
		tabNode.setAttribute("id","tabID");
		var rowNum = document.getElementsByName("rowNum")[0].value; //取文本框的值
		var colNum = document.getElementsByName("colNum")[0].value;
		for(var x=1;x<=rowNum;x++){
			var trNode = tabNode.insertRow(); //调用table 对象方法插入一行 
			for(var y=1;y<=colNum;y++){
				var tdNode = trNode.insertCell();
				tdNode.innerHTML = x+"...."+ y ;  //添加的是HTML文本 
			}
		}	
		document.getElementsByTagName("div")[0].appendChild(tabNode);
		event.srcElement.disabled = true ; //关闭触发事件
	}
	function delrow(){  //删除指定行
		var tabNode = document.getElementById("tabID");
		if(tabNode==null){
			alert("不存在"); 
			return ;
		}
		var rowNum = document.getElementsByName("delrow")[0].value;
		if(rowNum>0 && rowNum<=tabNode.rows.length)
			tabNode.deleteRow(rowNum-1);
		else
			alert("行不存在");
	}
	function delcol(){  //删除指定列
		var tabNode = document.getElementById("tabID");
		if(tabNode==null){
			alert("不存在"); 
			return ;
		}
		var colNum = document.getElementsByName("delcol")[0].value;
		if(colNum>0 && colNum <= tabNode.rows[0].cells.length){
			for(var x=0;x<tabNode.rows.length;x++){
				tabNode.rows[x].deleteCell(colNum-1); 
			}
		}
		else
			alert("列不存在");
	}
</script>
<style type="text/css"> 
	table{ border: #0066FF 1px solid ; width:60%;}
	table th{ border:#003399 1px solid ; background-color: #0099FF;}
	table td{border:#0099FF 1px solid ;}
</style>
</head>
<body>
	行：<input type="text" name="rowNum"/>
	列： <input type="text" name="colNum" />
	<input type="button" value="创建表格" οnclick="createTab()"/><br/>
	<input type="text" name="delrow" />
	<input type="button" value="删除行" οnclick="delrow()" />
	<input type="text" name="delcol" />
	<input type="button" value="删除列" οnclick="delcol()" />	
	<div></div>  <%--指定表格添加的位置 --%>
</body>

Jeep_Dom

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【javascript】table对象操作，动态创建，删除指定行列

function createTab(){ //动态创建表格 var tabNode = document.createElement("table"); tabNode.setAttribute("id","tabID"); var rowNum = document.getElementsByName("rowNum")[0].value; //取文本框的值 var colNu
复制链接

扫一扫