當前位置：
首頁 >
JS生成动态表格并为每个单元格添加单击事件的方法
發(fā)布時間：2023/12/13
56
豆豆
生活随笔
收集整理的這篇文章主要介紹了
JS生成动态表格并为每个单元格添加单击事件的方法
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<html><head><title>Demo</title><script>function getColumnDetail(column) {column.style.color = "blue"; //將被點擊的單元格設(shè)置為藍色 alert(column.innerHTML); //彈出被點單元格里的內(nèi)容 }<!--trLineNumber為動態(tài)表格行數(shù)，tdData為動態(tài)表格每行單元格的數(shù)據(jù)，數(shù)據(jù)類型為數(shù)組--> 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']);">動態(tài)表格：</label><br/><table border="1"><tbody id="table"></table></body></html>
調(diào)用setTable(trLineNumber,tdData)這個函數(shù)即可動態(tài)生成一個表格，并且為每個單元格都設(shè)置了一個單擊事件，觸發(fā)后，彈出被點單元格內(nèi)容，同時數(shù)據(jù)變藍
總結(jié)
以上是生活随笔為你收集整理的JS生成动态表格并为每个单元格添加单击事件的方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JQuery实现页面跳转
- 下一篇： JS 中的return false的作用