js生成动态表格并为每个单元格添加单击事件的方法
更新时间：2014年04月14日 15:11:58 作者：
这篇文章主要介绍了使用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)这个函数即可动态生成一个表格，并且为每个单元格都设置了一个单击事件，触发后，弹出被点单元格内容，同时数据变蓝
复制代码 代码如下:
<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高级程序设计 错误处理与调试学习笔记，学习js的朋友可以参考下。2011-09-09
这篇文章主要介绍了如何让用户输入wap手机网站的网址时自动跳转到wap网站,需要的朋友可以参考下2014-05-05
这篇文章主要为大家分享超详细的JS弹出窗口代码大全，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
本篇文章主要是对Script标签与访问HTML页面进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要为大家详细介绍了js图片轮播手动切换特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
由于公司官网采用的是dreamwaver / fireworks 內建的弹出式菜单的JS,在IE7下发现菜单项文字显示都变成一排,无法正确浏览.2009-10-10
在 ASP.NET Form 中使用 jBox 的时候，在按钮注册的客户端点击事件中，会发现不能弹出对话框问题2012-11-11
2009-09-09
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
这篇文章主要介绍了JavaScript实现计算字符串中出现次数最多的字符和出现的次数,本文直接给出实现代码,需要的朋友可以参考下2015-03-03
javascript笔记 String类replace函数的一些事
加固javascript基础知识目的是为以后研究jQuery源码做好铺垫。2011-09-09
最新评论