![[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 处理的，综合做的第一个实例，花了些心思看懂了前端代码，但是还是有 逻辑上需要加强的，尤其是删除表格那块的逻辑，我还是要加强理解。
前端模块：4.13demo.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格生成器</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="jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
//创建请求标志，防止重复请求
var flag = true;
$('button:first').on('click',function(){
//第一步：遍历并验证用户输入的信息
$(':input').not('button').each(function(index,obj){
//非空判断
if($(obj).val().length == 0){
//在元素后面加提示
//alert(1)
$(obj).after('<span style="color:red">不能为空</span>')
//用定时器提示信息2秒后删除
setTimeout(function(){
$(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){
$.get('4.14demo.php',{
//1.请求处理的脚本'4.14demo.php'；
//2.发送的请求参{
rows: $('input[name="rows"]').val(),
cols: $('input[name="cols"]').val()
},
//3.请求成功的回调函数
function(data){
//先将上一次生成的表格删除
$('p:last').next().remove()
//生成新的表格
$('p:last').after(data)
//将请求标志设置为false,禁止重复请求
flag = false
}
)
}
})
//重置按钮
$('button').eq(1).click(function(){
//将行与列数据全部清空
$(':input').not('button').val('')
//将输入焦点重置到行文本框上
$(':input:first').focus()
//将上一次请求生成的表格删除
$('p:last').next().remove()
//重置请求状态为true:允许用户请求
flag = true
})
</script>
</body>
</html>后端 4.14demo.php
实例
<?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%">';
//下面用双重循环来生成表格
//1.生成表头
$table.= '<tr align="center" bgcolor="lightgreen">';
for($i = 0;$i<$cols;$i++){
$table .= '<th>X</th>';
}
$table .= '</tr>';
//2.生成表格内容区
for($r=0;$r<$rows;$r++){
$table .= '<tr>';
for($c = 0;$c<$cols;$c++){
//设置单元格的数据，数据与单元格数量对应
$data = $r*$cols+$c+1;
//$data:可以确保从1开始计数，以确保符合人类正常思维
$table .= '<td align="center">'.$data.'</td>';
}
$table .= '</tr>';
}
$table .='</table>';
//将生成的表格返回到客户端
echo $table;
//结束当前脚本，可以省略,但写是好习惯
exit();
}
}else{
exit('<span style="color:red"非法请求</span>');
}
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：最终测试的都是能正常处理的，就是前端比较薄弱