js生成动态表格并为每个单元格添加单击事件的方法

前端技术 2023/09/07 JavaScript
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>

调用setTable(trLineNumber,tdData)这个函数即可动态生成一个表格，并且为每个单元格都设置了一个单击事件，触发后，弹出被点单元格内容，同时数据变蓝

本文地址：https://www.stayed.cn/item/19592

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案