使用自定义对象动态在页面上绘制一张表格，动态地向表格中添加公司员工的基本信息，测试数据不少于3 条，员工信息包括姓名、年龄、性别和部门

最新推荐文章于 2024-10-01 19:00:00 发布

明金同学

最新推荐文章于 2024-10-01 19:00:00 发布

阅读量10w+

点赞数 1

分类专栏： JavaScript交互式练习文章标签： javascript html html5 session canvas

本文链接：https://blog.csdn.net/weixin_44893902/article/details/109505348

版权

JavaScript交互式练习专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态填充HTML表格的方法。通过定义员工类并创建多个实例，将这些实例的数据添加到网页上的表格中。实现了姓名、年龄、性别和部门等信息的动态展示。

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

查看本章节

查看作业目录

需求说明：

在页面上绘制一张表格，动态地向表格中添加公司员工的基本信息，测试数据不少于3 条，员工信息包括姓名、年龄、性别和部门

实现思路：

在页面中绘制表格，表头显示员工的基本信息，分别为姓名、年龄、性别和部门
在JavaScript 脚本中创建一个员工类，员工类中包含员工的属性：姓名、年龄、性别和部门
构建3 个不同的员工对象，并将它们添加到数组中
页面加载后，使用for…in 语句和with 语句遍历数组中员工对象，动态地将它们添加到表格中

实现代码：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table border="1" id="tab">
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>部门</th>
			
			</tr>
		</table>
		<script type="text/javascript">
			function Employee(name,age,gender,department){
				this.name=name;
				this.age=age;
				this.gender=gender;
				this.department=department;
			}
			var p1=new Employee("张三","25","男","人事部");
			var p2=new Employee("李四","23","女","财务部");
			var p3=new Employee("王五","24","女","研发部");
			var arr=new Array(p1,p2,p3);
			function init(){
				var table=document.getElementById("tab");
				for (var index in arr) {
					var tr=document.createElement("tr");
				    for (var prop in arr[index]) {
				    	var td=document.createElement("td");
				    	with (arr[index]){
				    		if (prop=="name") {
				    			td.innerHTML=name;
				    		}
				    		if (prop=="age") {
				    			td.innerHTML=age;
				    		}
				    		if (prop=="gender") {
				    			td.innerHTML=gender;
				    		}
				    		if (prop=="department") {
				    			td.innerHTML=department;
				    		}
				    	}
				    	tr.appendChild(td);
				    }
				    table.appendChild(tr);
				}
			}
			window.onload=function(){
				init();
			}
		</script>		
	</body>
</html>