js生成动态表格并为每个单元格添加单击事件的方法
更新时间：2014年04月14日 15:11:58 作者：
这篇文章主要介绍了使用javascript生成动态表格并为每个单元格添加单击事件,需要的朋友可以参考下
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)这个函数即可动态生成一个表格，并且为每个单元格都设置了一个单击事件，触发后，弹出被点单元格内容，同时数据变蓝
复制代码 代码如下:
<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连接access数据库的方法...2006-11-11
这篇文章主要为大家详细介绍了微信小程序选择图片控件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
这篇文章给大家认真介绍了微信小程序城市定位的实现实例，主要实现了获取当前所在国家城市信息的相关资料，文中介绍的非常详细，相信对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-05-05
一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。模块开发需要遵循一定的规范，否则就都乱套了2016-12-12
在Javascript中为String对象添加trim,ltrim,rtrim方法
利用Javascript中每个对象(Object)的prototype属性我们可以为Javascript中的内置对象添加我们自己的方法和属性。2006-09-09
表单通常用来收集网页访问者信息，常见的表单比如搜索引擎的搜索框、各网页应用的注册或者登陆界面等，通读本篇对大家的学习或工作具有一定的价值，需要的朋友可以参考下2021-10-10
JavaScript 已经成为全栈开发技能的基石，在全栈开发面试中都会不可避免地涉及到与 JavaScript 有关的问题。这篇文章主要给大家介绍了关于JavaScript必看的10道面试题,需要的朋友可以参考下2021-05-05
这篇文章主要介绍了JavaScript设计模式之单例模式原理与用法,结合实例形式分析了单例模式的原理、命名空间的使用、闭包、惰性单例形式以及单例模式的基本应用,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了JS如何获取指定范围内的随机数含小数问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了JavaScript中var的重要性,结合实例形式分析了javascript变量定义、作用范围、作用域及相关操作注意事项,需要的朋友可以参考下2019-07-07
最新评论