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

曾经终败给现在 2021-09-12 01:20 558阅读 0赞

<html>
    
    	<head>
    		<title>Demo</title>
    		<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>
    	</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)这个函数即可动态生成一个表格，并且为每个单元格都设置了一个单击事件，触发后，弹出被点单元格内容，同时数据变蓝**

发表评论取消回复

表情：

评论列表（有 0 条评论，558人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS 动态生成表格

案例分析： ① 因为表格里面的数据都是动态生成的，实际开发的数据都是要保存到数据库里的，我们这里暂且不使用数据库，采取自定义数据的方式完成案例，数据我们以对象的形式存储到一

比眉伴天荒/ 2023年09月27日 11:34/ 0 赞/ 150 阅读

相关 js动态生成表格

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

た入场券/ 2023年06月24日 08:10/ 0 赞/ 19 阅读

相关 going-client(一)表格单元格点击事件

show-cloud是后台，going-client是对应的前台项目。 going-client采用vue2的单也应用，具体技术细节不做介绍咯。这里记录下如何实现点击一个单

我就是我/ 2023年06月22日 07:23/ 0 赞/ 15 阅读

相关为ListView每个Item上面的按钮添加事件

.先看下效果图： ![1354609651_6655.png][] ![1354609659_1888.png][] ![1354609665_8610.png][]

╰+攻爆jí腚メ/ 2022年08月20日 03:19/ 0 赞/ 251 阅读

相关 jquery结合js实现动态添加内容，并给动态添加的内容添加事件

jquery结合js实现向后台发送请求，给页面动态添加内容，并给动态添加的内容添加事件 .html内容如下： <button class="btn btn-md c

客官°小女子只卖身不卖艺/ 2022年06月08日 01:57/ 0 赞/ 216 阅读

相关为ajax中动态生成的标签添加事件

很多时候我们会用ajax向后台发送请求,然后根据返回的数据遍历来动态的添加表格或标签,此时如果想要给这些数据添加事件,一般会在动态添加完成之后再添加事件,这里就不讲这种方法了,

朴灿烈づ我的快乐病毒、/ 2022年05月14日 02:10/ 0 赞/ 158 阅读

相关 Layui中操作数据表格，给指定单元格添加事件

最近入坑Layui这个为服务端程序员量身定做的前端框架。为什么不用vue结合各种流行前端框架Element、iView啊什么，后台大哥们不会啊！！！只好我来迁就他们

﹏ヽ暗。殇╰゛Y/ 2022年01月29日 14:47/ 0 赞/ 902 阅读

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

<html> <head> <title>Demo</title> <script> function get

曾经终败给现在/ 2021年09月12日 01:20/ 0 赞/ 559 阅读

相关 js 操作表格-修改单元格内容

表格的修改将修改内容变成框(input标签),将原内容按照字符串拼接放在value里失去焦点后，将框变成文本，并将文本内容变成框的va

爱被打了一巴掌/ 2021年07月24日 16:20/ 0 赞/ 472 阅读

相关 js 操作表格-单元格和行

表格的修改获取行对象,每个行中的单元格都有索引 var tr=btn.parentNode.parentNode; 获取单元格数组,操作索引来

小鱼儿/ 2021年07月24日 15:49/ 0 赞/ 541 阅读