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 相关文章推荐
Prototype最新版(1.5 rc2)使用指南(1)
Jan 10 Javascript
window.location不跳转的问题解决方法
Apr 17 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 Javascript
jQuery 的 ready()的纯js替代方法
Nov 20 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
原生JS实现不断变化的标签
May 22 Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
ios中视频的最后一桢问题解决
May 14 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 Javascript
javascript数组的定义及操作实例
Nov 10 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 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
PHP中创建并处理图象
2006/10/09 PHP
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
隐性调用php程序的方法
2015/06/13 PHP
Yii中表单用法实例详解
2016/01/05 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
jquery实现简单的无缝滚动
2015/04/15 Javascript
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
Python中获取网页状态码的两个方法
2014/11/03 Python
python在指定目录下查找gif文件的方法
2015/05/04 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
python视频按帧截取图片工具
2019/07/23 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
汽车销售顾问求职自荐信
2014/01/01 职场文书
八年级英语教学反思
2014/01/09 职场文书
初中三年毕业生的自我评价分享
2014/02/14 职场文书
高中语文课后反思
2014/04/27 职场文书
升职自荐信范文
2015/03/27 职场文书
趣味运动会简讯
2015/07/20 职场文书
Python如何让字典保持有序排列
2022/04/29 Python
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers