利用Javascript动态生成表格的小demo

最新推荐文章于 2024-07-12 09:36:48 发布

a_fafafa

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量121

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_49203128/article/details/119540229

版权

利用Javascript动态生成表格的小demo

利用Javascript中data数据库存储内容动态生成表格，点击删除可对整行内容进行删除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态生成表格</title>
		<style type="text/css">
			table{
				margin: 100px auto;
				border-collapse: collapse;
				border: 1px solid #000;
				width: 500px;
				text-align: center;
			}
			th{
				border: 1px solid #000;
				background-color: #ccc;
				height: 40px;
			}
			th:nth-child(1){
				width: 120px;
			}
			th:nth-child(2){
				width: 180px;
			}
			th:nth-child(3){
				width: 100px;
			}
			tr,td{
				border: 1px solid #000;
				height: 25px;
				background-color: antiquewhite;
			}
		</style>
	</head>
	<body>
		<table >
			<thead>
				<tr>
					<th>姓名</th>
					<th>科目</th>
					<th>成绩</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>	
			</tbody>
		</table>
		
		<script type="text/javascript">
			// 1、先去准备好数据
			var datas = [{
				name : '魏珞樱',
				subject : 'Javascript',
				sorce : 100
			},{
				name : '弘历',
				subject : 'Javascript',
				sorce : 98
			},{
				name : '傅恒',
				subject : 'Javascript',
				sorce : 96
			},{
				name : '明玉',
				subject : 'Javascript',
				sorce : 94
			},{
				name : '苏大强',
				subject : 'Javascript',
				sorce : 92
			},{
				name : '明哲',
				subject : 'Javascript',
				sorce : 90
			},
			]
			// 2、往tbody 里面创建行 有几个人创建几行
			var tbody = document.querySelector('tbody');
			for(var i = 0 ;i<datas.length;i++){ // 外面循环行
				//1. 创建 tr行
				var tr = document.createElement('tr');
				tbody.appendChild(tr);
				//2. 行里面创建 td单元格 for循环遍历对象 datas[i]
				for(var k in datas[i]){ // 里面循环列
					var td = document.createElement('td');
					td.innerHTML = datas[i][k];
					tr.appendChild(td);
				}
				// 3.创建有删除字的单元格
				var td = document.createElement('td');
				td.innerHTML = '<a href="javascript:;">删除</a>'
				tr.appendChild(td);
			}
			// 4.删除操作 
			var as = document.querySelectorAll('a');
			for(var i = 0 ;i< as.length;i++){
				as[i].onclick = function(){
					// 点击a 删除当前a 所在的行 
					tbody.removeChild(this.parentNode.parentNode);
				}
			}
		</script>
	</body>
</html>

a_fafafa

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
利用Javascript动态生成表格的小demo

利用Javascript动态生成表格的小demo利用Javascript中data数据库存储内容动态生成表格，点击删除可对整行内容进行删除<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>动态生成表格</title> <style type="text/css"> table{ margin: 100px auto;
复制链接

扫一扫