接收后台传来的数据,在页面创建表格,表格:增,删,改,查 javascript

仰望星空001

于 2019-11-01 21:05:21 发布

阅读量474

点赞数 1

本文链接：https://blog.csdn.net/weixin_45789271/article/details/102864653

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		        table,
		        td {
		            border: 2px solid #000;
		        }
		
		        table {
		            width: 800px;
		            height: 500px;
		            margin: 100px auto;
		            border-collapse: collapse;
		        }
		    </style>
	</head>
	<body>
		<div></div>
		    <table>
		
		            <thead>
		                <tr>
		                    <td>姓名</td>
		                    <td>年龄</td>
		                    <td>性别</td>
							 <td>保/留</td>
		                </tr>
		            </thead>
		            <tbody>
		            </tbody>
		    </table>
			
			<script type="text/javascript">
				//数组里面的内容是灵活 可以随意添加
				var arr = [
				    {
				        name: 'Jack',
				        age: 18,
				        gender: '男'
				    }, {
				        name: 'Rose',
				        age: 20,
				        gender: '女'
				    }, {
				        name: 'Top',
				        age: 22,
				        gender: '男'
				    }, {
				        name: 'Rose',
				        age: 20,
				        gender: '女'
				    }, {
				        name: 'Top',
				        age: 22,
				        gender: '男'
				    }, {
				        name: 'Rose',
				        age: 20,
				        gender: '女'
				    }, {
				        name: 'Top',
				        age: 22,
				        gender: '男'
				    }, {
				        name: 'Jack',
				        age: 18,
				        gender: '男'
				    }, {
				        name: 'Jack',
				        age: 18,
				        gender: '男'
				    }
				]
				//获取表格
				var tab = document.querySelector("tbody")
				//通过forEach循环进行遍历
				arr.forEach(function(value,index){
					//创建一个tr
					var tr = document.createElement("tr")
					//用for循环来创建<td>然后赋值给tr;  将表格内容添加到tdz中
					for(let i in value){
						let td = document.createElement("td")
						td.innerHTML = value[i]
						tr.appendChild(td)
					}
					//将后台传来的数据中, 在末尾添加一个删除按钮,页面展示
					//再在for循环外面创建一个<td></td>
					var td = document.createElement("td")
					tr.appendChild(td)
					//创建一个删除按钮 <span></span>
					var  sp = document.createElement("span")
					//赋值
					sp.innerHTML = "删除"
					//点击的时候删除表格
					sp.onclick= function(){
						this.parentNode.parentNode.remove();
					}
					/
					td.appendChild(sp)
						tab.appendChild(tr)
				})
				
				
				
				
				
				
		
			</script>
	</body>
</html>

仰望星空001

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
接收后台传来的数据,在页面创建表格,表格:增,删,改,查 javascript

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> table, td { border: 2px solid #000; ...
复制链接

扫一扫