signed

QiShunwang

“诚信为本、客户至上”

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

2021/6/9 9:30:34   来源:
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)这个函数即可动态生成一个表格,并且为每个单元格都设置了一个单击事件,触发后,弹出被点单元格内容,同时数据变蓝
您可能感兴趣的文章:
  • angularjs实现table表格td单元格单击变输入框/可编辑状态示例
  • vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
  • angularJs 表格添加删除修改查询方法
  • JS实现动态表格的添加,修改,删除功能(推荐)
  • JS动态修改表格cellPadding和cellSpacing的方法
  • js动态修改表格行colspan列跨度的方法
  • javascript修改表格背景色实例代码分享
  • 查询绑定数据岛的表格中的文本并修改显示方式的js代码
  • js实现单击可修改表格