js生成动态表格并为每个单元格添加单击事件的方法_js怎么添加单击事件这些 - CSDN文库

194 浏览量更新于2023-05-05 评论收藏 26KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

主要介绍了使用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); //弹出被点单元格里的内容

}

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)这个函数即可动态生成一个表格，并且为每个单元格都设置了一个单击事件，触发后，弹

出被点单元格内容，同时数据变蓝

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

评论0

weixin_38538021

粉丝: 1
资源: 889

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈