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"; //將被點擊的單元格設置為藍色
alert(column.innerHTML); //彈出被點單元格里的內容
}
<!--trLineNumber為動態(tài)表格行數,tdData為動態(tài)表格每行單元格的數據,數據類型為數組-->
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>
調用setTable(trLineNumber,tdData)這個函數即可動態(tài)生成一個表格,并且為每個單元格都設置了一個單擊事件,觸發(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:
復制代碼 代碼如下:
<script>
function getColumnDetail(column){
column.style.color = "blue"; //將被點擊的單元格設置為藍色
alert(column.innerHTML); //彈出被點單元格里的內容
}
<!--trLineNumber為動態(tài)表格行數,tdData為動態(tài)表格每行單元格的數據,數據類型為數組-->
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>
調用setTable(trLineNumber,tdData)這個函數即可動態(tài)生成一個表格,并且為每個單元格都設置了一個單擊事件,觸發(fā)后,彈出被點單元格內容,同時數據變藍
相關文章
fireworks菜單生成器mm_menu.js在 IE 7.0 顯示問題的解決方法
由于公司官網采用的是dreamwaver / fireworks 內建的彈出式菜單的JS,在IE7下發(fā)現菜單項文字顯示都變成一排,無法正確瀏覽.2009-10-10JavaScript實現計算字符串中出現次數最多的字符和出現的次數
這篇文章主要介紹了JavaScript實現計算字符串中出現次數最多的字符和出現的次數,本文直接給出實現代碼,需要的朋友可以參考下2015-03-03javascript筆記 String類replace函數的一些事
加固javascript基礎知識目的是為以后研究jQuery源碼做好鋪墊。2011-09-09