Table按列动态增加删除

最新推荐文章于 2022-11-23 17:19:17 发布

今天也要努力吃饭

最新推荐文章于 2022-11-23 17:19:17 发布

阅读量226

点赞数

分类专栏：前端学习文章标签： javascript

本文链接：https://blog.csdn.net/ML1998/article/details/110079542

版权

前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态创建表格增加或者删除列</title>
		<style type="text/css">
			table {
				border-collapse: collapse;
			}

			tr,
			td {
				width: 80px;
				height: 20px;
				border: 1px solid greenyellow;
				background-color: #FFC0CB;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var oTable = document.createElement("table");
				oTable.id = "t"
				for (var i = 0; i < 3; i++) {
					var oTr = document.createElement("tr");
					for (var j = 0; j < 3; j++) {
						var oTd = document.createElement("td");
						oTr.appendChild(oTd);
					}
					oTr.id = i
					oTable.appendChild(oTr);
				}
				document.body.appendChild(oTable);
				var oBtn = document.getElementById("insb");
				oBtn.onclick = function() {
					for (var i = 0; i < 3; i++) {
						toString(i);
						var oTr0 = document.getElementById(i);
						var oTd = document.createElement("td");
						oTr0.appendChild(oTd);
					}
				}
				var oDel = document.getElementById("delb");
				oDel.onclick = function() {
					for (var i = 0; i < 3; i++) {
						toString(i);
						var oTr0 = document.getElementById(i);
						oTr0.removeChild(oTr0.lastElementChild);
					}
				}
			}
		</script>
	</head>
	<body>
		<input type="button" id="insb" value="ins">
		<input type="button" id="delb" value="del">
	</body>
</html>

今天也要努力吃饭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Table按列动态增加删除

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>动态创建表格增加或者删除列</title> <style type="text/css"> table { border-collapse: collapse; } tr, td { width: 80px; height: 20px;
复制链接

扫一扫