这篇文章主要介绍了使用 javascript 生成动态表格并为每个单元格添加单击事件, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
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) 这个函数即可动态生成一个表格,并且为每个单元格都设置了一个单击事件,触发后,弹出被点单元格内容,同时数据变蓝
来源: