![[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
本节通过该实例全面复习HTML，JQuery，AJAX等相关知识，同时学习了表单到PHP后台的处理方法,
利用PHP字符串拼接，循环for($i=0;$i<$cols;$i++){}，数组的使用。
效果图：
代码实力部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP 表格自动生成器</title>
<style type="text/css">
h3 {
color: green;
margin-left:40px;
}
button {
width: 80px;
height: 30px;
border: none;
background-color: green;
color:white;
margin-right: 30px;
}
</style>
</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" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/table.js"></script>
</body>
</html>JS代码部分（table.js）
//创建请求标志,防止重复请求
var flag = true
$('button:first').on('click',function(){
//第一步:遍历并验证用户的输入信息
//$(选择器).each(对象索引,当前对象):用来循环遍历获取到所有jquery对象
$(':input').not('button').each(function(index,obj){
//非空判断
if ($(obj).val().length == 0) {
//在当前元素后添加提示信息
$(obj).after('<span style="color:red">不能为空</span>')
//用定时器使提示信息2秒后消失
setTimeout(function(){
//2秒后,将提示信息删除
$(obj).next().remove()
},2000)
//返回让用户重新操作
return false
//非数字判断
} else if (isNaN($(obj).val())) {
$(obj).after('<span style="color:red">必须是数字</span>')
setTimeout(function(){
$(obj).next().remove()
},2000)
return false
//零值判断
} else if ($(obj).val() <= 0) {
$(obj).after('<span style="color:red">必须大于0</span>')
setTimeout(function(){
$(obj).next().remove()
},2000)
return false
}
})
//第二点:处理用户的请求(Ajax实现)
if (flag == true) {//这里必须为true，否则无法提交，
$.get(
//1.请求处理的脚本
'table.php',
//2.发送的请求参数
{
rows: $('input[name="rows"]').val(),
cols: $('input[name="cols"]').val()
},
//3.请求成功的回调函数
function(data){
//先将上一次生成的表格删除
$('p:last').next().remove()
//生成新的表格
$('p:last').after(data)
//将请求标志设置为flase,禁止重复请求
flag = false
}
)
}
})
//重置按钮
$('button').eq(1).click(function(){
//将行与列数据全部清空
$(':input').not('button').val('')
//将输入焦点重置到行文本框上
$(':input:first').focus()
//将上一次请求生成的表格删除
$('p:last').next().remove()
//重置请求状态为true:允许用户请求
flag = true
})//判断用户的请求类型是否合法,必须是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="5" align="center" width="90%">';
$table .= '<tr align="center" bgcolor="lightblue">';
//1生成表头
//此处数组仅供测试，学习只用，实际运用中需进行判断 数组长度是否超出用户请求的长度。
//例如：$cols<=数组长度，否则会发生溢出错误。
$thTitle=['编号','名字','性别','学历','年龄','国家','省份','城市','电话','婚姻'];
for($i=0;$i<$cols;$i++){
$table.='<th>'.$thTitle[$i].'</th>';
}
$table.='</tr>';
//生成表格内容
///先生成行再生成列
for($a=0;$a<$rows;$a++){
$table.='<tr>';
//生成列
for ($b=0; $b < $cols; $b++) {
$data=$a*$cols+$b;
$table.='<td>'.++$data.'</td>';
}
$table.='</tr>';
}
$table.='</table>';
echo $table;
exit();
}
}else{
exit('<span style="color:red">非法请求！</span>');
}点击 "运行实例" 按钮查看在线实例
