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

最新推荐文章于 2024-06-24 23:21:12 发布

yusirxiaer

最新推荐文章于 2024-06-24 23:21:12 发布

阅读量1.4w

点赞数 7

分类专栏： JavaScript 文章标签： javascript 单元格添加单击事件

本文链接：https://blog.csdn.net/yusirxiaer/article/details/60141435

版权

JavaScript 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

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

yusirxiaer

关注

7
点赞
踩
21

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS生成动态表格并为每个单元格添加单击事件的方法

Demo function getColumnDetail(column) { column.style.color = "blue"; //将被点击的单元格设置为蓝色 alert(column.innerHTML); //弹出被点单元格里的内容 } function setTable(trLineNumber, tdData) { v
复制链接

扫一扫