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

192 阅读 0 评论 127 点赞

我是靠谱客的博主独特芹菜，最近开发中收集的这篇文章主要介绍js生成动态表格并为每个单元格添加单击事件的方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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> 