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

最新推荐文章于 2021-02-03 11:31:42 发布

zkelm.com

最新推荐文章于 2021-02-03 11:31:42 发布

阅读量364

点赞数 1

分类专栏：南宁小程序开发公众号开发南宁小程序文章标签：南宁企业oa开发企业oa开发企业办公系统开发广西小程序开发南宁网站开发维护

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

版权

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

25 篇文章 0 订阅

订阅专栏

南宁小程序

14 篇文章 0 订阅

订阅专栏

公众号开发

4 篇文章 0 订阅

订阅专栏

热爱学习无法自拔，每天进步1%

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

javascript对table的操作对数据的增加删除

先写一个table 这个就不做解析了，照着代码撸就对了！

<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;
			}
		</style>
<body>
		<table>
		    <thead>
				<tr>
					<th>姓名</th><th>学科</th><th>分数</th><th>操作</th>
				</tr>				
			<thead>
			<tbody>
				
			</tbody>
		</table>
	</body>

显示效果如下！
小程序订制：www.zkelm.com

接下来写javascript 对数据进行动态添加

  //定义数组
  var students=[
				{name: "陈奇",majop:"javascript",grade:100,control:"删除"},
				{name: "刘好人",majop:"javascript",grade:100,control:"删除"},
				{name: "罗贯中",majop:"javascript",grade:100,control:"删除"},
				{name: "张三丰",majop:"javascript",grade:100,control:"删除"},
				{name: "黄飞鸿",majop:"javascript",grade:100,control:"删除"},
				{name: "小程序",majop:"zkelm.com",grade:100,control:"删除"},
			]
//循环获取数组信息，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");
     //创造文字节点，否则 使用appendChild（node） 会加不进去
     var txtNode=document.createTextNode(students[i][x]);
     //把txtNode文字节点加入到td中
     td.appendChild(txtNode);
     //把 td加入到tr中， 一共有4个键值所以加入四次
     tr.appendChild(td);     
     }
     document.querySelector("tbody").appendChild(tr);
}

运行结果如下：
南宁小程序定制：www.zkelm.com

本章有两个坑：1.td.appendChild(node) 这里 node 不能是文本，要先创造一个文本节点，createTextNode（“文本节点”）然后才可以加入到td里面
2.students[i][x] for（x in students[i]）其中 x 获取到的是建的名字 in 可以用于枚举对象键值！

其它挺简单的，每天进步1% 老规矩，有需要软件和oa开发的请联系我，虽然写代码不是最牛逼的，但是策划项目出方案我很专业。

南宁企业oa开发：www.zkelm.com

zkelm.com

关注

1
点赞
踩
0

收藏

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

热爱学习无法自拔，每天进步1%南宁小程序开发：www.zkelm.comjavascript对table的操作对数据的增加删除先写一个table 这个就不做解析了，照着代码撸就对了！<style> table{ border:1px solid #aaa; border-collapse:collapse; text-align: center; width: 350px; } th,td,tr{ bor
复制链接

扫一扫