Collection
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<?php
//判断用户的请求类型是否合法，必须是GET请求
if ($_SERVER['REQUEST_METHOD']== 'GET'){
if (!empty($_GET['rows']) && !empty($_GET['cols']))
$rows = $_GET['rows'];
$cols = $_GET['cols'];
//用短变量名称进行转存
$table = '<table border="1" cellspacing="0" cellpadding="3" align="center" width="80%">';
//创建表格的基本结构，采用字符串拼接方式，最后统一生成，提高效率
//下面用双重循环来生成这个表格
$table .= '<tr align="center" bgcolor="lightgreen">';
for ($i=0; $i<$$cols;$i++){
$table .= '<th>x</th>';
}
$table .= '</tr>';
for ($r=0; $r<$rows; $r++){
$table .= '<tr>';
for ($c=0; $c<$cols; $c++){
//设置单元格的数据，数据与单元格数量对应
$data = $r*$cols+$c;
$table .= '<td align="center">'.++$data.'</td>';
}
$table .= '</tr>';
}
$table .= '</table>';
echo $table;
exit();
}
}else{
exit('<span style="color:red">请求类型错误</span>');
}
?>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>实战 表格生成器</title>
<style type="text/css">
H3{
color:red;
margin-left:40px;
}
button{
width:80px;
height:30px;
margin-left:30px;
border:none;
background-color:green;
color:white;
}
</style>
<script type=text/javascript src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
</body>
<H3>表格生成器</H3>
<p><label>输入行：<input type="text" name="rows"></label></p>
<p><label>输入列：<input type="text" name="cols"></label></p>
<p><button>生成表格</button><button>重置表格</button></p>
<script type="text/javascript">
//首先创建一个请求标志，防止重复生成;
var flag=true
$('button:first').on('click',function()
{
//遍历并验证用户输入的信息
}
)
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例