JavaScript-案例动态生成表格_机房作业1.表单全选。(点击表头按钮全选表身)2.动态生成表格。(使用js生成表-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_49213878/article/details/125034743

本文介绍了如何利用JavaScript编程动态地生成HTML表格，包括创建表格结构、填充数据以及操作表格元素的方法，适合前端开发者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript-动态生成表格案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	
</head>
<body>
	<table border="" cellspacing="0" cellpadding="0">
		<thead>
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>学科</th>
				<th>删除</th>
			</tr>
		</thead>
		<tbody>
			
		</tbody>
	</table>
	<script>
		var sz=[
			{name:'小明',age:12,subject:"javascript"},
			{name:'小红',age:14,subject:"javascript"},
			{name:'小刚',age:22,subject:"javascript"},
			{name:'小王',age:32,subject:"javascript"},
		]
		var tbody=document.querySelector('tbody');
		for(var i=0;i<sz.length;i++){
			var tr=document.createElement('tr');
			tbody.appendChild(tr);
			for(var k in sz[i]){
				var td=document.createElement('td');
				td.innerHTML=sz[i][k];
				tr.appendChild(td);
			}
			var td_sc=document.createElement('td');
			td_sc.innerHTML='<a href="javascript:;">删除</a>';
			tr.appendChild(td_sc);
			
		}
		var a=document.querySelectorAll('a');
		for(var i=0;i<a.length;i++){
			a[i].onclick=function(){
				tbody.removeChild(this.parentNode.parentNode);
			}
		}
	</script>
</body>
</html>