js 练习1

最新推荐文章于 2023-10-17 10:33:08 发布

--END--

最新推荐文章于 2023-10-17 10:33:08 发布

阅读量92

点赞数

本文链接：https://blog.csdn.net/qq_42807643/article/details/104876382

版权

js table动态创建

<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<style>
		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;
		}
	</style>
</head>

<body>
	<table>
		<tr>
			<th>姓名</th>
			<th>科目</th>
			<th>成绩</th>
			<th>操作</th>
		</tr>
	</table>
</body>
<script>
	//准备数据
	var datas = [{
		name: '魏璎珞',
		subject: 'JavaScript',
		score: 100
	}, {
		name: '弘历',
		subject: 'JavaScript',
		score: 98
	}, {
		name: '傅恒',
		subject: 'JavaScript',
		score: 99
	}, {
		name: '明玉',
		subject: 'JavaScript',
		score: 88
	}, {
		name: '大猪蹄子',
		subject: 'JavaScript',
		score: 0
	}];
	/*
	 * 1.获取当前表格table
	 * 2.根据datas数组遍历确定创建多少个tr行
	 * 3.根据datas数组遍历出具体对象的值
	 */
	var table = document.getElementsByTagName("table")[0];
	for(var i = 0; i < datas.length; i++) {
		var tr = document.createElement("tr");
		table.appendChild(tr);
		for(var j in datas[i]) {
			console.log(j)
			var td = document.createElement("td");
			//console.log(datas[i][j]);
			td.innerHTML = datas[i][j];
			tr.appendChild(td);
		}
		var td = document.createElement("td");
		td.innerHTML = "<a href='#'>删除</a>"
		tr.appendChild(td);

	}
	debugger;
	var a = document.getElementsByTagName("a");
	for(var i = 0; i < a.length; i++) {
		a[i].onclick = function() {
			this.parentNode.parentNode.remove()
		}
	}
</script>

--END--

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 练习1

js table动态创建<head lang="en"> <meta charset="UTF-8"> <title></title> <style> table { width: 500px; margin: 100px auto; border-collapse: collapse; text...
复制链接

扫一扫