动态创建表格

schy_hqh

于 2013-12-17 17:22:43 发布

阅读量79

点赞数

分类专栏： WEB前端@DHTML 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/schy_hqh/article/details/84512989

版权

WEB前端@DHTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用dom创建表格</title>
<style type="text/css">
	table,table td {
		border: #239bde thin solid;
		width:400px;
		border-collapse: collapse;//表格的边框被合并为一个单一的边框
	}
	table td {
		padding: 10px;
	}
</style>
<script type="text/javascript">
	/*创建表格*/
	function crtTable() {
		var rownum = parseInt(document.getElementById("rownum").value);
		var colnum = parseInt(document.getElementById("colnum").value);
		
		var oTabNode = document.createElement("table");
		//oTabNode.id = "newTable";
		oTabNode.setAttribute("id","newTable");
		
		for(var i=1;i<=rownum;i++) {
			var oTrNode = oTabNode.insertRow();
			for(var j=1;j<=colnum;j++) {
				var oTdNode = oTrNode.insertCell();
				oTdNode.innerHTML = i+"-"+j;
			}
		}
		
		document.getElementById("div_tb").appendChild(oTabNode);
		
		//document.getElementById("btn").disabled = true;
		
	}
	
	/*删除行*/
	function delRow() {
		var tabNode = document.getElementById("newTable");
		if(!tabNode) {//tabNode == null;
			alert("表格不存在");
			return;
		}
		var rownum = document.getElementById("delrow").value;
		var rowsCount = tabNode.rows.length;//获取总行数 
		if(rownum>=1 && rownum <= rowsCount) {
			tabNode.deleteRow(rownum-1);//index 从0开始
		} else {
			alert("行不存在");
		}
		
	}
	
	/*删除列：即删除每一行相同位置的某个单元格*/
	function delCol() {
		var tabNode = document.getElementById("newTable");
		if(!tabNode) {//tabNode == null;
			alert("表格不存在");
			return;
		}
		var colnum = document.getElementById("delcol").value;
		var colCount = tabNode.rows[0].cells.length;//任意一行的列数 
		if(colnum>=1 && colnum<=colCount) {
			//循环每一行
			for(var i=0;i<tabNode.rows.length;i++) {
				tabNode.rows[i].deleteCell(colnum-1);//index从0开始，所以减去1 
			}
		} else {
			alert("列不存在");
		}
		
	}
</script>
	
</head>
<body>
	行:<input type="text" name="rownum" id="rownum" size="2"/>
	列:<input type="text" name="colnum" id="colnum" size="2"/>
	<input type="button" value="创建表格" id="crt" οnclick="crtTable();"/>	
	
	<hr/>
	
	行:<input type="text" name="delrow" id="delrow" size="2"/>
	<input type="button" value="删除行"  οnclick="delRow();"/>	
	列:<input type="text" name="delcol" id="delcol" size="2"/>
	<input type="button" value="删除列"  οnclick="delCol();"/>	
	
	<hr/>
	
	<div id="div_tb"></div>	
</body>
</html>

schy_hqh

关注

0
点赞
踩
1

收藏

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

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;使用dom创建表格&lt;/title&gt;&lt;style type="text/css"&gt; table,table td { b
复制链接

扫一扫