南宁小程序开发公司,挑战百日学习计划第41天（js对单元格的增删查改)

最新推荐文章于 2022-04-30 12:04:24 发布

zkelm.com

最新推荐文章于 2022-04-30 12:04:24 发布

阅读量219

点赞数 1

分类专栏：南宁小程序开发南宁小程序小程序定制文章标签：南宁小程序开发南宁软件开发南宁商城开发南宁网站开发

本文链接：https://blog.csdn.net/zkelm/article/details/107438434

版权

南宁小程序开发同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

小程序定制

15 篇文章 1 订阅

订阅专栏

南宁小程序

14 篇文章 0 订阅

订阅专栏

纯javascript对表格的删除，动态赋值动态删除. 这里直接附带源码。没毛病，这个文章就是充数的，对上一个实例的一个补充
完整的代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>student表格</title>
		<style>
			table{
				border:1px solid #aaa;
				border-collapse:collapse;
				text-align: center;
				width: 350px;				
				
			}
			th,td,tr{
				border:1px solid #aaa;
			}
			thead{
				background-color: aqua;
			}
			tbody{
				background-color: #eee;
			}
			tbody tr td a{
				color:#888;				
			}
			tbody tr td a:hover{
				color:blue;				
			}
		</style>
	</head>
	<body>
		<table>
		    <thead>
				<tr>
					<th>姓名</th><th>学科</th><th>分数</th><th>操作</th>
				</tr>				
			<thead>
			<tbody>
				
			</tbody>
		</table>
		<script type="text/javascript">
			  //定义数组
			  var students=[
							{name: "陈奇",majop:"javascript",grade:100,control:"<a>删除</a>"},
							{name: "刘好人",majop:"javascript",grade:100,control:"<a>删除</a>"},
							{name: "罗贯中",majop:"javascript",grade:100,control:"<a>删除</a>"},
							{name: "张三丰",majop:"javascript",grade:100,control:"<a>删除</a>"},
							{name: "黄飞鸿",majop:"javascript",grade:100,control:"<a>删除</a>"},
							{name: "小程序",majop:"zkelm.com",grade:100,control:"<a>删除</a>"},
						]
			//循环获取数组信息，students[1]= 一个对象 object
			for(var i=0;i<students.length;i++){
			    //此时 students[0]={name: "陈奇",majop:"javascript",grade:100,control:"删除"}
			   //创造tr元素  
			    var tr=document.createElement("tr");
			     //利用（x in object）枚举对象的键值
			    for(var x in students[i]){
			     //x 就是对象的建名：name，majop，grade，control
			     //创造td元素
			     var td=document.createElement("td");
			     
			     //把txtNode文字节点加入到td中
			     td.innerHTML=students[i][x];
			     //把 td加入到tr中， 一共有4个键值所以加入四次
			     tr.appendChild(td);     
			     }
			     document.querySelector("tbody").appendChild(tr);				 
			}
			
			
			//循环获取a元素
			var table=document.querySelector("tbody");
			var alist=document.querySelectorAll("a");
			
			for(var i=0;i<alist.length;i++){
				alist[i].onclick=function(){
					table.removeChild(this.parentNode.parentNode);
				}
			}
			
		</script>
	</body>
</html>

运行结果：
南宁小程序开发：www.zkelm.com

南宁小程序开发：www.zkelm.com

zkelm.com

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
南宁小程序开发公司,挑战百日学习计划第41天（js对单元格的增删查改)

纯javascript对表格的删除，动态赋值动态删除. 这里直接附带源码。没毛病，这个文章就是充数的，对上一个实例的一个补充完整的代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>student表格</title> <style> table{ border:1px solid #aaa; bord
复制链接

扫一扫