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

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生成动态表格,并为每个单元格添加单击事件

上一篇:Java设计模式之从[使命召唤等游戏的任务提示]分析职责链(Chain Of Responsibility)模式


下一篇:学习笔记_java web—EL表达式