![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
作业要求：
1. 使用foreach/if替代语法循环遍历二维数组
2.制作: 员工管理系统 后台首页, 要求简洁美观,体会<a>标签的target属性 与iframe 的name属性之间的关系
1. 使用foreach/if替代语法循环遍历二维数组
<?php
$staffs = [
['id'=>1, 'name'=>'候亮平', 'age'=>30, 'sex'=>1, 'email'=>'hlp@php.cn', 'password'=>sha1('123456')],
['id'=>2, 'name'=>'赵瑞龙', 'age'=>40, 'sex'=>1, 'email'=>'zrl@php.cn', 'password'=>sha1('123456')],
['id'=>3, 'name'=>'李达康', 'age'=>50, 'sex'=>1, 'email'=>'ldk@php.cn', 'password'=>sha1('123456')],
['id'=>4, 'name'=>'祁同伟', 'age'=>45, 'sex'=>1, 'email'=>'qtw@php.cn', 'password'=>sha1('123456')],
['id'=>5, 'name'=>'高小琴', 'age'=>30, 'sex'=>0, 'email'=>'gxq@php.cn', 'password'=>sha1('123456')],
];
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>二维数组遍历</title>
<style>
table,th,td {
border: 1px solid #666;
padding: 8px;
}
table {
border-collapse: collapse;
width: 80%;
text-align: center;
margin: 30px auto;
}
thead tr:first-of-type {
background-color: lightblue;
}
tbody tr:hover {
background-color: #efefef;
}
table > caption {
font-size: 1.2rem;
margin-bottom: 15px;
}
table + p {
text-align: center;
}
</style>
</head>
<body>
<table>
<caption>用户信息表</caption>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>邮箱</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<?php foreach ($staffs as $staff) : ?>
<tr>
<td><?=$staff['id']?></td>
<td><?=$staff['name']?></td>
<td><?=$staff['age']?></td>
<td>
<?=$staff['sex'] ? '男' : '女'?>
</td>
<td><?=$staff['email']?></td>
<td><?=$staff['password']?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<p>总计5人</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
这段代码是简写的形式，我尝试用几种不同的方法重写一遍核心的foreach代码
方法一：
<?php
$data = '';
foreach ($staffs as $staff) {
$data .= '<tr>';
$data .= '<td>' . $staff['id'].'</td>';
$data .= '<td>' . $staff['name'].'</td>';
$data .= '<td>' . $staff['age'].'</td>';
$data .= '<td>' . ($staff['sex'] ? '男' : '女') . '</td>';
$data .= '<td>' . $staff['email'].'</td>';
$data .= '<td>' . $staff['password'].'</td>';
};
echo $data;
?>点击 "运行实例" 按钮查看在线实例
使用函数方式实现代码复用：
function getData($staffs) {
$data = '';
foreach ($staffs as $staff){
$data = $data .'<tr>';
$data = $data . '<td>' . $staff['id'] .'</td>';
$data = $data . '<td>' . $staff['name'] .'</td>';
$data = $data . '<td>' . $staff['age'] .'</td>';
$data = $data . '<td>' . ($staff['sex'] ? '男' : '女' ) .'</td>';
$data = $data . '<td>' . $staff['email'] .'</td>';
$data = $data . '<td>' . $staff['password'] .'</td>';
$data = $data . '</tr>';
}
return $data;
}
<?php
echo getData($staffs);
?>
执行效果：
2.制作: 员工管理系统 后台首页, 要求简洁美观,体会<a>标签的target属性 与iframe 的name属性之间的关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>员工管理系统</title>
<style>
/*样式重置*/
h2, p, ul {
padding: 0;
margin: 0;
}
/*头部样式*/
.header {
height: 60px;
/*background-color: lightblue;*/
border-bottom: 1px solid #333;
line-height: 60px;
}
.header .content {
width: 1000px;
/*background-color: lightgray;*/
overflow: hidden;
margin: 0 auto;
}
.header .content h2 {
float:left
}
.header .content p {
float:right;
}
/*主体样式*/
.main {
width: 1000px;
min-height: 650px;
/*background-color: lightcyan;*/
margin: 0 auto;
position: relative;
}
.main .left {
width: 120px;
min-height: inherit;
/*background-color: lightgreen;*/
border-right: 1px solid #333;
position: absolute;
left: 0;
top: 0;
}
.main .right {
width: 880px;
min-height: inherit;
/*background-color: lightyellow;*/
position: absolute;
left: 121px;
top: 0;
}
/*左侧菜单样式*/
.main .left ul {
position: absolute;
left: 30px;
top: 50px;
}
.main .left li {
list-style-type: none;
line-height: 50px;
}
.main .left li a {
text-decoration-line: none;
}
.main .left li a:hover {
text-decoration-line: underline;
color: red;
}
/*右侧工作区样式*/
.main .right iframe {
width: 880px;
min-height: 650px;
border: none;
}
</style>
</head>
<body>
<div class="header">
<div class="content">
<h2>员工管理系统</h2>
<p>管理员:admin | <a href="">退出</a> </p>
</div>
</div>
<div class="main">
<div class="left">
<ul>
<li><a href="staff_list.php" target="workspace">员工管理</a> </li>
<li><a href="system.php" target="workspace">系统设置</a> </li>
<li><a href="user_list.php" target="workspace">用户设置</a> </li>
</ul>
</div>
<div class="right">
<iframe src="staff_list.php" name="workspace"></iframe>
<p style="text-align: center; margin-top: -100px;">php中文网</p>
</div>
</div>
</body>点击 "运行实例" 按钮查看在线实例