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


Posted in Javascript onApril 14, 2014

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 相关文章推荐
JavaScript CSS菜单功能 改进版
Dec 20 Javascript
jquery 常用操作整理 基础入门篇
Oct 14 Javascript
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
js时间日期和毫秒的相互转换
Feb 22 Javascript
在JavaScript中访问字符串的子串
Jul 07 Javascript
详解JavaScript跨域总结与解决办法
Oct 31 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
Dec 11 Javascript
Move.js入门
Feb 08 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
js闭包学习心得总结
Apr 17 Javascript
Node.js中的child_process模块详解
Jun 08 Javascript
微信小程序转发事件实现解析
Oct 22 Javascript
Js实现动态添加删除Table行示例
Apr 14 #Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 #Javascript
PHP开发者必须掌握的6个关键字
Apr 14 #Javascript
javascript中的括号()用法小结
Apr 14 #Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 #Javascript
jQuery操作表格(table)的常用方法、技巧汇总
Apr 12 #Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 #Javascript
You might like
改变Apache端口等配置修改方法
2008/06/05 PHP
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
wampserver改变默认网站目录的办法
2015/08/05 PHP
Linux php 中文乱码的快速解决方法
2016/05/13 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
vue分页器组件编写方法详解
2019/06/28 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
在vue中使用eslint,配合vscode的操作
2020/11/09 Javascript
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
Python使用正则表达式实现文本替换的方法
2017/04/18 Python
Python3导入自定义模块的三种方法详解
2018/04/13 Python
python3+PyQt5使用数据库表视图
2018/04/24 Python
python实现画一颗树和一片森林
2018/06/25 Python
使用Tensorboard工具查看Loss损失率
2020/02/15 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
TCP/IP的分层模型
2013/10/27 面试题
解释一下钝化(Swap out)
2016/12/26 面试题
市级绿色学校申报材料
2014/08/25 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
vue+element ui实现锚点定位
2021/06/29 Vue.js
python turtle绘图
2022/05/04 Python