动态生成表格

最新推荐文章于 2024-05-03 16:02:30 发布

hcoke

最新推荐文章于 2024-05-03 16:02:30 发布

阅读量136

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/m0_62962469/article/details/123507561

版权

1.先准备学生的数据

2.往tbody 里面创建行有几个人(通过数组的长度) 我们就创建几行

3.创建有删除两个字的单元格

4.删除操作开始

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table {
				width: 500px;
				margin: 100px auto;
				border-collapse: collapse;
				text-align: center;
			}
			
			td,
			 th {
				border: 1px solid #333;
			}
			
			thead tr {
				height: 40px;
				background-color: #ccc;
			}
			
			a {
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<table border="" cellspacing="" cellpadding="">
			<thead>
				<tr>
					<th>姓名</th>
					<th>科目</th>
					<th>成绩</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
		</table>
		<script type="text/javascript">
		//1.先准备学生的数据
			var datas = [
				{
					name:'pink老师',
					subject:'JavaScript',
					score:'100'
				},{
				name:'王',
				subject:'JavaScript',
				score:'99'
			},{
				name:'小明',
				subject:'JavaScript',
				score:'80'
			},{
				name:'小黑',
				subject:'JavaScript',
				score:'59'
			},{
				name:'大猪蹄子',
				subject:'JavaScript',
				score:'0'
			}	
			];
			//2.往tbody 里面创建行 有几个人(通过数组的长度) 我们就创建几行
			var tbody = document.querySelector('tbody');
			for(var i = 0; i < datas.length; i++) {
				//创建tr行
				var tr = document.createElement('tr');
				tbody.appendChild(tr);
				//行里面创建单元格 td 单元格的数量取决于每个对象里面的属性个数 for循环遍历datas[i]
				for(var k in datas[i]) { //里面的for循环管列td
				//创建单元格
					var td = document.createElement('td');
					
				//把对象里面的属性值 给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 j = 0; j < as.length; j++) {
				as[j].onclick = function() {
					tbody.removeChild(this.parentNode.parentNode);
				}
			}
		</script>
	</body>
</html>

hcoke

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
动态生成表格

1.先准备学生的数据2.往tbody 里面创建行有几个人(通过数组的长度) 我们就创建几行3.创建有删除两个字的单元格4.删除操作开始例子：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> table { width: 500px;
复制链接

扫一扫