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 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
基于jquery实现状态限定编辑的代码
Feb 11 Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
May 11 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
解决js ajax同步请求造成浏览器假死的问题
Jan 18 Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 Javascript
一文搞懂ES6中的Map和Set
May 20 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 Javascript
JavaScript Dom实现轮播图原理和实例
Feb 19 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下保存远程图片到本地的办法
2010/08/08 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
BootStrap selectpicker
2016/06/20 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
[00:32]2018DOTA2亚洲邀请赛VG出场
2018/04/03 DOTA
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
Python入门之后再看点什么好?
2018/03/05 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
利用python爬取有道词典的方法
2020/12/08 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
html5触摸事件判断滑动方向的实现
2018/06/05 HTML / CSS
html5 canvas 使用示例
2010/10/22 HTML / CSS
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
银行实习人员自我鉴定
2013/09/22 职场文书
毕业生医学检验求职信
2013/10/16 职场文书
学生出入校管理制度
2014/01/16 职场文书
二手房购房意向书范本
2014/04/01 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
医生个人年度总结
2015/02/28 职场文书
单身证明格式样本
2015/06/15 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
创业计划书之酒吧
2019/12/02 职场文书
解决golang 关于全局变量的坑
2021/05/06 Golang
Python Django模型详解
2021/10/05 Python
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers