您的位置：首页 > Web前端 > JavaScript

js生成动态表格并为每个单元格添加单击事件的方法

2014-04-14 00:00 976 查看

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)这个函数即可动态生成一个表格，并且为每个单元格都设置了一个单击事件，触发后，弹出被点单元格内容，同时数据变蓝

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航