![[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
创建数据
<?php //1.创建数据 $lists = [//二维数组 ['id'=>1,'product'=>'pen','number'=>20,'price'=>40,'color'=>'1'], ['id'=>2,'product'=>'eraser','number'=>30,'price'=>10,'color'=>'1'], ['id'=>3,'product'=>'ruler','number'=>10,'price'=>20,'color'=>'1'], ['id'=>4,'product'=>'box','number'=>40,'price'=>50,'color'=>'0'], ['id'=>5,'product'=>'bag','number'=>50,'price'=>60,'color'=>'0'] ]; $title = '文具***列表'; $tableTitle = $title; ?>
2.使用foreach()遍历数组，创建模板
方法一：
<?php
$data = '';
foreach ($lists as $list){ ////foreach()遍历二维数组，创建一个临时变量$list,从二维数组中提取出一维数组，然后通过变量提输出对应的值。
$data .= '<tr>';
$data .= '<td>'. $list['id'] .'</td>';
$data .= '<td>'. $list['product'] .'</td>';
$data .= '<td>'. $list['number'] .'</td>';
$data .= '<td>'. $list['price'] .'</td>';
$data .= '<td>'. ($list['color'] ? '黑色' : '红色') .'</td>';//用三元运算符判断颜色
$data .= '</tr>';
};
echo $data;//输出变量
?>方法二： <?php foreach ($lists as $list) : ?> <tr> <td><?=$list['id']?></td> <td><?=$list['product']?></td> <td><?=$list['number']?></td> <td><?=$list['price']?></td> <!-- <td>--><?//=$list['color'] ? '黑色' : '红色' ?><!--</td>-->//三元运算符判断颜色 <td> <?php if ($list['color'] == 1) : ?>//if（）语句判断颜色 黑色 <?php else: ?> 红色 <?php endif; ?> </td> </tr> <?php endforeach;?>
3.表格完整代码
<?php
//1.创建数据
$lists = [
['id'=>1,'product'=>'pen','number'=>20,'price'=>40,'color'=>'1'],
['id'=>2,'product'=>'eraser','number'=>30,'price'=>10,'color'=>'1'],
['id'=>3,'product'=>'ruler','number'=>10,'price'=>20,'color'=>'1'],
['id'=>4,'product'=>'box','number'=>40,'price'=>50,'color'=>'0'],
['id'=>5,'product'=>'bag','number'=>50,'price'=>60,'color'=>'0']
];
$title = '文具***列表';
?>
<!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?></title>
</head>
<style>
table,th,td {
border: 1px solid #666;
padding: 6px;
}
table {
border-collapse: collapse;
width: 50%;
text-align: center;
margin: 30px auto;
}
thead tr:first-of-type {
background-color: #000;
color: #fff;
}
tbody tr:hover {
background-color: #efefef;
}
table > caption {
font-size: 1.2rem;
margin-bottom: 15px;
}
table + p {
text-align: center;
}
</style>
<body>
<table>
<caption>
<?php
if (!isset($tableTitle)){ //issret判断是否声明变量
$tableTitle = '文具***列表';
}
echo '<span style="color: red;">' . $tableTitle . '</span>';
?>
</caption>
<thead>
<tr>
<th>编号</th>
<th>产品</th>
<th>数量</th>
<th>价格</th>
<th>颜色</th>
</tr>
</thead>
<tbody>
<!-- 方法一：-->
<!-- --><?php
// $data = '';
// foreach ($lists as $list){ ////foreach()遍历二维数组，创建一个临时变量$list,从二维数组中提取出一维数组，然后通过变量提输出对应的值。
// $data .= '<tr>';
// $data .= '<td>'. $list['id'] .'</td>';
// $data .= '<td>'. $list['product'] .'</td>';
// $data .= '<td>'. $list['number'] .'</td>';
// $data .= '<td>'. $list['price'] .'</td>';
// $data .= '<td>'. ($list['color'] ? '黑色' : '红色') .'</td>';//用三元运算符判断颜色
// $data .= '</tr>';
// };
// echo $data;//输出变量
// ?>
<!-- 方法二：-->
<?php foreach ($lists as $list) : ?>
<tr>
<td><?=$list['id']?></td>
<td><?=$list['product']?></td>
<td><?=$list['number']?></td>
<td><?=$list['price']?></td>
<!-- <td>--><?//=$list['color'] ? '黑色' : '红色' ?><!--</td>-->
<td>
<?php if ($list['color'] == 1) : ?>//if（）语句判断颜色
黑色
<?php else: ?>
红色
<?php endif; ?>
</td>
</tr>
<?php endforeach;?>
</tbody>
</table>
</body>
</html> 