js生成動態(tài)表格并為每個單元格添加單擊事件的方法
更新時間：2014年04月14日 15:11:58 作者：
這篇文章主要介紹了使用javascript生成動態(tài)表格并為每個單元格添加單擊事件,需要的朋友可以參考下
html:
<html>
<head>
<title>Demo</title>
</head>
<body>
<label style="font-size:20px;width:600px;" >動態(tài)表格：</label><br/>
<table border="1">
<tbody id="table">
</table>
</body>
</html>
script:
<script>
function getColumnDetail(column){
column.style.color = "blue"; //將被點(diǎn)擊的單元格設(shè)置為藍(lán)色
alert(column.innerHTML); //彈出被點(diǎn)單元格里的內(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>
調(diào)用setTable(trLineNumber,tdData)這個函數(shù)即可動態(tài)生成一個表格，并且為每個單元格都設(shè)置了一個單擊事件，觸發(fā)后，彈出被點(diǎn)單元格內(nèi)容，同時數(shù)據(jù)變藍(lán)
復(fù)制代碼 代碼如下:
<html>
<head>
<title>Demo</title>
</head>
<body>
<label style="font-size:20px;width:600px;" >動態(tài)表格：</label><br/>
<table border="1">
<tbody id="table">
</table>
</body>
</html>
script:
復(fù)制代碼 代碼如下:
<script>
function getColumnDetail(column){
column.style.color = "blue"; //將被點(diǎn)擊的單元格設(shè)置為藍(lán)色
alert(column.innerHTML); //彈出被點(diǎn)單元格里的內(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>
調(diào)用setTable(trLineNumber,tdData)這個函數(shù)即可動態(tài)生成一個表格，并且為每個單元格都設(shè)置了一個單擊事件，觸發(fā)后，彈出被點(diǎn)單元格內(nèi)容，同時數(shù)據(jù)變藍(lán)
您可能感興趣的文章:
相關(guān)文章
用javascript連接access數(shù)據(jù)庫的方法
用javascript連接access數(shù)據(jù)庫的方法...2006-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序選擇圖片控件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
微信小程序城市定位的實(shí)現(xiàn)實(shí)例（獲取當(dāng)前所在國家城市信息）
這篇文章給大家認(rèn)真介紹了微信小程序城市定位的實(shí)現(xiàn)實(shí)例，主要實(shí)現(xiàn)了獲取當(dāng)前所在國家城市信息的相關(guān)資料，文中介紹的非常詳細(xì)，相信對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-05-05
一個模塊就是實(shí)現(xiàn)特定功能的文件，有了模塊，我們就可以更方便地使用別人的代碼，想要什么功能，就加載什么模塊。模塊開發(fā)需要遵循一定的規(guī)范，否則就都亂套了2016-12-12
在Javascript中為String對象添加trim,ltrim,rtrim方法
利用Javascript中每個對象(Object)的prototype屬性我們可以為Javascript中的內(nèi)置對象添加我們自己的方法和屬性。2006-09-09
JavaScript一文帶你玩轉(zhuǎn)web表單網(wǎng)頁
表單通常用來收集網(wǎng)頁訪問者信息，常見的表單比如搜索引擎的搜索框、各網(wǎng)頁應(yīng)用的注冊或者登陸界面等，通讀本篇對大家的學(xué)習(xí)或工作具有一定的價值，需要的朋友可以參考下2021-10-10
JavaScript必看的10道面試題總結(jié)（推薦）
JavaScript 已經(jīng)成為全棧開發(fā)技能的基石，在全棧開發(fā)面試中都會不可避免地涉及到與 JavaScript 有關(guān)的問題。這篇文章主要給大家介紹了關(guān)于JavaScript必看的10道面試題,需要的朋友可以參考下2021-05-05
JavaScript設(shè)計(jì)模式之單例模式原理與用法實(shí)例分析
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之單例模式原理與用法,結(jié)合實(shí)例形式分析了單例模式的原理、命名空間的使用、閉包、惰性單例形式以及單例模式的基本應(yīng)用,需要的朋友可以參考下2018-07-07
JS如何獲取指定范圍內(nèi)的隨機(jī)數(shù)含小數(shù)
這篇文章主要介紹了JS如何獲取指定范圍內(nèi)的隨機(jī)數(shù)含小數(shù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了JavaScript中var的重要性,結(jié)合實(shí)例形式分析了javascript變量定義、作用范圍、作用域及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-07-07