js生成动态表格并为每个单元格添加单击事件的方法
发布时间:2020-12-14 22:59:56 所属栏目:资源 来源:网络整理
导读:html: 复制代码 代码如下: html head titleDemo/title /head body label style="font-size:20px;width:600px;" 动态表格:/labelbr/ table border="1" tbody id="table" /table /body /html script: 复制代码 代码如下: script function getColumnDetail(colu
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)这个函数即可动态生成一个表格,并且为每个单元格都设置了一个单击事件,触发后,弹出被点单元格内容,同时数据变蓝 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |