收藏
批改状态：合格
老师批语：
利用PHP代码，做成的表格生成器，分为前端和后端，代码如下： 前端代码： bg1.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格生成器</title>
<style type="text/css">
h3{
color: green;
margin-left: 80px;
}
button{
width: 80px;
height:30px;
border: none;
background-color: green;
color: white;
margin-left: 30px;
}
</style>
</head>
<body>
<h3>表格生成器</h3>
<!-- 增加标题输入栏 -->
<P><label>输入标题：<input type="text" name="title1"></label></P>
<P><label>输入行数：<input type="text" name="rows"></label></P>
<p><label>输入列数：<input type="text" name="cols"></label></p>
<p><button>生成表格</button><button>重置表格</button></p>
<!-- 下载好jquery,注意路径,下面我就放在同目录 -->
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$('button:first').on('click',function(){
//each() 方法规定为每个匹配元素规定运行的函数。返回 false 可用于及早停止循环。
//$(选择器).each(对象索引,当前对象):用来循环遍历获取到所有jquery对象
//这里检验用户输入的3种错误数据：空，非零及是否大于零
//创建请求标志flag，防止重复生成
var flag=true
//创建错误输入标志input_flag，防止发送错误请求
var input_flag=true
$(':input').not('button').each(function(index,obj){
if ($(obj).val().length==0) {
input_flag=false
$(obj).after('<span style="color:red">不能为空</span>')
//用定时器使提示信息2秒后消失
setTimeout(function(){
$(obj).next().remove()
}, 2000);
return false
//isNaN() 函数用于检查其参数是否是非数字值
//跳过对标题的数字检测
}else if (!($(obj).name="title1") && isNaN($(obj).val())) {
input_flag=false
$(obj).after('<span style="color:red">必须是数字</span>')
setTimeout(function(){
$(obj).next().remove()
}, 2000)
return false
}else if (!($(obj).name="title1") &&($(obj).val()<=0) ){
input_flag=false
$(obj).after('<span style="color:red">数字必须大于零</span>')
setTimeout(function(){
$(obj).next().remove()
}, 2000);
return false
}})
//检测结束
//处理用户的请求(Ajax实现)
if(flag==true&&input_flag==true){
$.get(
//1.请求处理的脚本bg2.php
'bg2.php',
//2.发送的请求参数，包括标题，行，列
{
title1:$('input[name="title1"]').val(),
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
input_flag=true
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
运行结果：
后端代码： bg2.php
<?php
//检测方法必须是GET
if($_SERVER['REQUEST_METHOD']=='GET'){
//检测行列非空，增加标题检测
if(!empty($_GET['rows']) && !empty($_GET['cols']) && !empty($_GET['title1'])){
//接收标题内容、行数、列数的数据
$title1=$_GET['title1'];
$rows=$_GET['rows'];
$cols=$_GET['cols'];
//
//创建表格的基本架构,采用字符串拼接方式,最后统一生成。
$table='<table border="1" cellspacing="0" cellpadding="3" align="center" width="80%">';
//显示标题
echo '<h2 align="center">'.$title1.'</h2>';
//生成表头
$table.='<tr align="center" bgcolor="lightgreen">';
//for($i=0;$i<$cols;$i++) {
// $table.='<th> X </th>';
// }
//
$i=0; //试试用当循环实现
while ($i<$cols) {
$table.='<th> X </th>';
$i++;
}
//
$table.='</tr>'; //结束表头
//生成表格内容区
//使用双循环
for($r=0;$r<$rows;$r++){
$table.='<tr>';
for($c=0;$c<$cols;$c++){
$data=$r*$cols+$c+1;//表格内容填上数字从1开始
$table.='<td align="center">'.$data.'</td>';
}
$table.='</tr>';//结束表格内容
}
$table.='</table>';//整个表格完成
echo $table;//输出表格
exit();//结束当前脚本
}
}else{
exit('<span style="color:red">非法请求</span>');
}点击 "运行实例" 按钮查看在线实例
执行结果:
总结：
1、前端使用了jQuery库，通过jQrery $each遍历函数对输入数据进行检查；
2、接着使用超全局变量_GET，发送和搜集数据；虽然没有$_POST安全，但是我们做的仅仅是表格生成器，不涉及用户隐私信息，所以用GET方法没关系。
3、重置按钮还是用的遍历函数的.eq()、.first()、.next()、.last()、.not()和一些方法。
4、后端先检查GET，再检查数据非空，然后创建表格基本框架（采用字符串拼接方法），最后统一生成表格。
5、表头采用单循环，表格内容区采用双循环实现，最后exit（）结束脚本。
6、有点小瑕疵，还在考虑改正，就是生成表格模块（出现模块多次重复）。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
