JS生成動態表格併為每個單元格新增單擊事件的方法
阿新 • • 發佈：2019-01-11
呼叫setTable(trLineNumber,tdData)這個函式即可動態生成一個表格，並且為每個單元格都設定了一個單擊事件，觸發後，彈出被點單元格內容，同時資料變藍<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>