JS生成动态表格并为每个单元格添加单击事件的方法
2017-03-03 15:56
786 查看
<html> <head> <title>Demo</title> <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> </head> <body> <label style="font-size:20px;width:600px;" onclick="setTable(1,['first','second','third']);">动态表格:</label><br/> <table border="1"> <tbody id="table"> </table> </body> </html>调用setTable(trLineNumber,tdData)这个函数即可动态生成一个表格,并且为每个单元格都设置了一个单击事件,触发后,弹出被点单元格内容,同时数据变蓝
相关文章推荐
- js生成动态表格并为每个单元格添加单击事件的方法
- JS动态生成的元素,其对应的方法不响应(比如单击事件,鼠标移动事件等)
- jQuery向动态生成的内容添加事件响应(jquery live方法简介)
- JS实现向表格中动态添加行的方法
- 点击表格的单元格时实现变颜色,通过for循环为每个单元格添加一个onclick事件
- JS实现为表格动态添加标题的方法
- JS动态生成表单,并添加行双击事件
- 动态给表格TD 添加单击事件
- JS动态添加事件的执行方法.
- js动态往表格的td中添加图片并注册事件
- js动态添加事件的方法
- JS动态创建表格,动态设置属性,动态添加事件
- js动态添加事件的方法
- 动态生成html添加响应事件和css样式时处理方法
- js动态添加onload、onresize、onscroll事件(另类方法)
- 多种方法实现JS动态添加事件
- js动态添加事件的方法!()
- js动态添加事件的方法
- js动态添加事件的方法