javascript生成动态表格，并为每个单元格添加单击事件

来源：互联网发布：淘宝好评评语怎么删除编辑：程序博客网时间：2024/05/18 01:27

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)这个函数即可动态生成一个表格，并且为每个单元格都设置了一个单击事件，触发后，弹出被点单元格内容，同时数据变蓝

0 0