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

<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;" οnclick="setTable(1,['first','second','third']);">動態表格：</label><br/><table border="1"><tbody id="table"></table></body></html>

調用setTable(trLineNumber,tdData)這個函數即可動態生成一個表格，并且為每個單元格都設置了一個單擊事件，觸發后，彈出被點單元格內容，同時數據變藍

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/247840.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/247840.shtml
英文地址，請注明出處：http://en.pswp.cn/news/247840.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！