當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
JS生成动态表格并为每个单元格添加单击事件的方法
生活随笔
收集整理的這篇文章主要介紹了
JS生成动态表格并为每个单元格添加单击事件的方法
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<html><head><title>Demo</title><script>function getColumnDetail(column) {column.style.color = "blue"; //將被點(diǎn)擊的單元格設(shè)置為藍(lán)色 alert(column.innerHTML); //彈出被點(diǎn)單元格里的內(nèi)容 }<!--trLineNumber為動(dòng)態(tài)表格行數(shù)，tdData為動(dòng)態(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) }; //為每個(gè)單元格增加單擊事件 _cell.innerText = tdData[j];_row.appendChild(_cell);}}} </script></head><body><label style="font-size:20px;width:600px;" οnclick="setTable(1,['first','second','third']);">動(dòng)態(tài)表格：</label><br/><table border="1"><tbody id="table"></table></body></html>
調(diào)用setTable(trLineNumber,tdData)這個(gè)函數(shù)即可動(dòng)態(tài)生成一個(gè)表格，并且為每個(gè)單元格都設(shè)置了一個(gè)單擊事件，觸發(fā)后，彈出被點(diǎn)單元格內(nèi)容，同時(shí)數(shù)據(jù)變藍(lán)
總結(jié)
以上是生活随笔為你收集整理的JS生成动态表格并为每个单元格添加单击事件的方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JQuery实现页面跳转
- 下一篇： Jquery 获取日期date()对象，