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

查看本章节

查看作业目录

需求说明：

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

实现思路：

  1. 在页面中绘制表格，表头显示员工的基本信息，分别为姓名、年龄、性别和部门
  2. 在JavaScript 脚本中创建一个员工类，员工类中包含员工的属性：姓名、年龄、性别和部门
  3. 构建3 个不同的员工对象，并将它们添加到数组中
  4. 页面加载后，使用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>

 

posted @ 2020-11-06 23:44  明金同学  阅读(42)  评论(0)  编辑  收藏  举报