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 封装Ajax传递的数据代码
Jun 05 Javascript
js下通过getList函数实现分页效果的代码
Sep 17 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
Nov 23 Javascript
JavaScript插入动态样式实现代码
Feb 22 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
Nov 23 Javascript
jQuery动画特效实例教程
Aug 29 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
jquery滚动到顶部底部代码
Apr 20 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
vue实现自定义多选与单选的答题功能
Jul 05 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
Aug 27 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
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
第十节--抽象方法和抽象类
2006/11/16 PHP
input file获得文件根目录简单实现
2013/04/26 PHP
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
2008/12/29 Javascript
JavaScript 拾漏补遗
2009/12/27 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
Python无损音乐搜索引擎实现代码
2018/02/02 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
Python读取指定日期邮件的实例
2019/02/01 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
html5音频_动力节点Java学院整理
2018/08/22 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
2018/09/13 HTML / CSS
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
一套C#面试题
2013/10/09 面试题
2014年消防工作实施方案
2014/02/20 职场文书
竞选班委演讲稿
2014/04/28 职场文书
计算机系本科生求职信
2014/05/31 职场文书
市场营销策划方案
2014/06/11 职场文书
企业趣味活动方案
2014/08/21 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
财务务虚会发言材料
2014/10/20 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
优质服务标语口号
2015/12/26 职场文书