首页 > 编程语言 > 详细

javascript生成动态表格,并为每个单元格添加单击事件

时间:2014-04-14 18:53:53      阅读:441      评论:0      收藏:0      [点我收藏+]

html:

<html>
  <head>
    <title>Demo</title>
  </head> 
  <body>   
	<label style="font-size:20px;width:600px;" >动态表格:</label><br/>
	<table border="1">
		<tbody id="table">  
	</table>
  </body>
</html>


script:

<script>		
	function getColumnDetail(column){ 
		column.style.color = "blue";  //将被点击的单元格设置为蓝色
		alert(column.innerHTML);  //弹出被点单元格里的内容
	}		
	<!--trLineNumber为动态表格行数,tdData为动态表格每行单元格的数据,数据类型为数组-->
	function setTable(trLineNumber,tdData){
	 	var _table = document.getElementById("table");  
		var _row;  
		var _cell; 		 	
	 	for (var i = 0; i < trLineNumber; i++) {	
	 		_row = document.createElement("tr");       
	    	document.getElementById("table").appendChild(_row);  
	    	for(var j = 0; j < tdData.length; j++) {  
	        	_cell = document.createElement("td");  
	        	_cell.onclick= function(){getColumnDetail(this)}; //为每个单元格增加单击事件
	        	_cell.innerText = tdData[j];  
	        	_row.appendChild(_cell);  
	 		}

	 	}
	}		
</script>

调用setTable(trLineNumber,tdData)这个函数即可动态生成一个表格,并且为每个单元格都设置了一个单击事件,触发后,弹出被点单元格内容,同时数据变蓝

javascript生成动态表格,并为每个单元格添加单击事件,布布扣,bubuko.com

javascript生成动态表格,并为每个单元格添加单击事件

原文:http://blog.csdn.net/u011427934/article/details/23669607

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!