<fieldset id="wy6io"></fieldset>

<tfoot id="wy6io"></tfoot>

<del id="wy6io"></del>

js生成動態表格并為每個單元格添加單擊事件的方法

2019-11-20 20:49:52

字體：大中小

來源：轉載

供稿：網友

html:

復制代碼代碼如下:

 
<html> 
<head> 
<title>Demo</title> 
</head> 
<body> 
<label style="font-size:20px;width:600px;" >動態表格：</label><br/> 
<table border="1"> 
<tbody id="table"> 
</table> 
</body> 
</html> 

script:

復制代碼代碼如下:

 
<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> 