JS生成动态表格并为每个单元格添加单击事件的方法

<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;" οnclick="setTable(1,['first','second','third']);">动态表格：</label><br/><table border="1"><tbody id="table"></table></body></html>

调用setTable(trLineNumber,tdData)这个函数即可动态生成一个表格，并且为每个单元格都设置了一个单击事件，触发后，弹出被点单元格内容，同时数据变蓝

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/247840.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！