JS动态表格

最新推荐文章于 2024-05-13 01:52:35 发布

猴小小~~

最新推荐文章于 2024-05-13 01:52:35 发布

阅读量180

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43821010/article/details/104118008

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JS动态表格

思路：
1、需要分别渲染头部和内容；
2、头部只需一个tr即可，td则是具体json中的属性，一层for循环即可；
3、内容则需要两层for循环，第一层是json里面对象的个数（也就是行数td），第二层for循环是td；
4、使用到DOM中的创建节点、追加节点和删除节点方法。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>动态表格</title>
<style>
	table{
		width:500px;
		margin:50px auto;
		border:1px solid #000;
		border-collapse:collapse;
	}
	thead{
		text-align:center;
	}
	table tr{
		height:40px;
		background-color:orange;
	}
	table td{
		padding:0 10px;
	}
	table a{
		float:rigth;
	}
</style>
</head>
<body>
	<table cellpadding="0" cellspacing="0">
		<thead></thead>
		<tbody></tbody>
	</table>
	<script>
		var fiels=["姓名","类别","分数","操作","暂无"];
		var dates={
			"head":{
				"date":"20200130",
				"temp":"just"
			},
			"body":[
				{
					name:'张丽',
					type:'javaScript',
					score:'84'
				},
				{
					name:'小智',
					type:'Java',
					score:'94'
				},
				{
					name:'叶子楣',
					type:'C语言',
					score:'99'
				},
				{
					name:'胡浩',
					type:'PHP',
					score:'38'
				}
			]
		};
		//渲染head属性
		var thead=document.querySelector('thead');
		var head_rs=document.createElement('tr');
		thead.appendChild(head_rs);
		for(var k=0;k<fiels.length;k++){
			var head_td=document.createElement('td');
			head_td.innerHTML=fiels[k];
			head_rs.appendChild(head_td);
		}
		
		//渲染body中的数据
		var tbodys=document.querySelector('tbody');
		for(var i=0;i<dates["body"].length;i++){
			var trs=document.createElement('tr');
			tbodys.appendChild(trs);
			for(var j in dates["body"][i]){
				var tds=document.createElement('td');
				tds.innerHTML=dates["body"][i][j];
				trs.appendChild(tds);
			}
			var td=document.createElement('td');
			td.innerHTML='<a href="javascript:;">删除</a>';
			trs.appendChild(td);
		}
		
		//获取所有a元素
		var as=document.querySelectorAll('a');
		//循环注册点击事件
		for(var k=0;k<as.length;k++){
			as[k].onclick=function(){
				tbodys.removeChild(this.parentNode.parentNode);
			}
		}
	</script>
</body>
</html>

猴小小~~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS动态表格

JS动态表格思路：1、需要分别渲染头部和内容；2、头部只需一个tr即可，td则是具体json中的属性，一层for循环即可；3、内容则需要两层for循环，第一层是json里面对象的个数（也就是行数td），第二层for循环是td；4、使用到DOM中的创建节点、追加节点和删除节点方法。<!DOCTYPE HTML><html><head><me...
复制链接

扫一扫

专栏目录