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 比较时间大小的代码
Apr 24 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
Jul 17 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
Dec 25 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
详解JavaScript跨域总结与解决办法
Oct 31 Javascript
一个Vue页面的内存泄露分析详解
Jun 25 Javascript
LayUI表格批量删除方法
Aug 15 Javascript
微信小程序多音频播放进度条问题
Aug 28 Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 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
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
js正确获取元素样式详解
2009/08/07 Javascript
解析John Resig Simple JavaScript Inheritance代码
2012/12/03 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
2016/09/14 Javascript
js初始化验证实例详解
2016/11/26 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
js实现石头剪刀布游戏
2020/10/11 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
linux下安装easy_install的方法
2013/02/10 Python
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
解读Python编程中的命名空间与作用域
2015/10/16 Python
Python通过命令开启http.server服务器的方法
2017/11/04 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
性能服装:HYLETE
2018/08/14 全球购物
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
Python如何实现单例模式
2016/06/03 面试题
老师推荐信
2013/10/28 职场文书
保护动物的标语
2014/06/11 职场文书
施工安全责任书范本
2014/07/24 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
监守自盗观后感
2015/06/10 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
python中requests库+xpath+lxml简单使用
2021/04/29 Python