说免柬鹤踞免抒蔚辆谁卜课煽
新建demo6.php 并引入jquery
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实战:表格自动生成器</title>
</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>
</body>
</html>
执行:
美化：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实战:表格自动生成器</title>
<style type="text/css">
h3
{
color:coral;/*字体颜色：橘黄*/
margin-left:60px;/*左外边距60px*/
}
button
{
width:80px;
height:30px;
margin-left:20px;/*左外边距20px*/
border:none;/*去除边框*/
background-color:coral;/*背景：橘黄*/
color:white;/*字体颜色：白色*/
}
</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>
</body>
</html>
执行：
第一步:遍历并验证用户的输入信息 用户输入信息不能为空
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实战:表格自动生成器</title>
<style type="text/css">
h3
{
color:coral;/*字体颜色：橘黄*/
margin-left:60px;/*左外边距60px*/
}
button
{
width:80px;
height:30px;
margin-left:20px;/*左外边距20px*/
border:none;/*去除边框*/
background-color:coral;/*背景：橘黄*/
color:white;/*字体颜色：白色*/
}
</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.js"></script><!--引入jquery-->
<script type="text/javascript">
//创建请求标志位，防止用户重复请求
var flag=true
$('button:first').on('click',function()
{
// alert(1)
//第一步:遍历并验证用户的输入信息
//$(选择器).each(对象索引,当前对象):用来循环遍历获取到所有jquery对象
//$(':input')可以获取所有input标签 textarea checkboxs button的数据
//当前表单只有input标签和button 要获取输入的数据就要过滤掉button 并使用each遍历
$(':input').not('button').each(function(index,obj){
//index:当前索引 obj：当前对象 即获取到的两个input内容的对象
// alert($(obj).val())
if($(obj).val().length==0)
{
//在当前元素后添加提示信息
$(obj).after('<span style="color:red">不能为空！</span>')
setTimeout(function(){
$(obj).next().remove()
},1000)
return false
}
})
})
</script>
</body>
</html>
执行，当用户不输入数值，直接点击生成表格时 会提示不能为空 信息会在2秒后消失
注意：return false 必须有 因为each遍历两个输入框的信息 当遍历到第一个输入框信息返回false时 就不会再遍历第二个输入框
如果不加return false ，则上下两个输入框都会提示不能为空
非数字判断 用户输入的信息必须是数字
核心源码
//非数字判断
else if(isNaN($(obj).val()))
{
//在当前元素后添加提示信息
$(obj).after('<span style="color:red">只能输入数字！</span>')
setTimeout(function(){
$(obj).next().remove()
},1000)
return false
}
执行：
输入的数值必须大于0 且应该小于一个固定的数值 防止恶意用户输入无限大的数值 破坏系统
软件开发最重要的原则就是永远不要相信你的用户！
核心源码
//输入的数值必须大于0 小于15
else if($(obj).val()<=0 || $(obj).val()>15)
{
//在当前元素后添加提示信息
$(obj).after('<span style="color:red">数值必须大于0，且小于等于15！</span>')
setTimeout(function(){
$(obj).next().remove()
},1000)
return false
}
执行：
第二点:处理用户的请求(Ajax实现) 即将用户输入的数据提交到demo7.php
核心源码：
//第二点:处理用户的请求(Ajax实现)
//只有用户第一次点击并提交的是正确数据才能生成表格
//防止用户生成无数个表格
if(flag==true)
{
$.get(
'demo7.php',//1.请求处理的脚本
{
//发送数据的变量名为rows,值为名为rows的输入框输入的数据
rows:$('input[name="rows"]').val(),
//发送数据的变量名为cols,值为名为cols的输入框输入的数据
cols:$('input[name="cols"]').val()
},//2.向脚本发送的数据
function(data)//成功的回调函数，data就是用于生成表格的数据
{
//在最后一个p标签（即重置按钮）后面生成表格
$('p:last').after(data)
//将请求标志设置为false,禁止重复请求
flag = false
})
}
执行，可以看到数据通过get形式提交到了demo7.php
新建demo7.php
<?php
//判断用户的请求类型是否合法,必须是GET请求
if($_SERVER['REQUEST_METHOD']=='GET')
{
//如果用户发送的数据全部存在且不为空
if(!empty($_GET['rows']) && !empty($_GET['cols']))
{
$rows=$_GET['rows'];
$cols=$_GET['cols'];
//创建表格的基本架构,采用字符串拼接方式,最后统一生成,提高效率
$str1="<table border='1' cellspacing='0' cellpadding='3' align='center' width='80%'>";
// 1.生成表头语句
$str2="<tr align='center'bgcolor='#faebd7'>";
for($i=0;$i<$cols;$i++)
{
$str2.="<td>*</td>";
}
$str2.="</tr>";
$str3="";
//2.双重for循环生成表格内容区
for($r=0;$r<$rows;$r++)
{
$str3 .="<tr align='center'>";
for($c=0;$c<$cols;$c++)
{
$str3.="<td>X</td>";
}
$str3.="</tr>";
}
$table=$str1.$str2.$str3."</table>";
echo $table;
}
}
else
{
exit('<span style="color:red">非法请求</span>');
}
执行demo6.php
优化，此时修改数据，再点击生成表格程序无响应 因为flag此时为false 删除flag 不使用flag策略 改为 每次用户点击生成时都删除上一次生成的表格
修改demo6.php
核心源码
function(data)//成功的回调函数，data就是用于生成表格的数据
{
//先将上一次生成的表格删除
$('p:last').next().remove()
//在最后一个p标签（即重置按钮）后面生成表格
$('p:last').after(data)
})
此时修改数据再生成表格：
实现重置按钮功能 即删除表格
修改demo6.php:
核心源码：
//重置按钮
$('button').eq(1).click(function(){
//将行与列数据全部清空
$(':input').not('button').val('')
//将输入焦点重置到行文本框上
$(':input:first').focus()
//将上一次请求生成的表格删除
$('p:last').next().remove()
})
执行，将情况输入框的数据，删除表格，光标移动到第一个输入框：
实现这样的效果：
计算公式：当前行数*总的列数+当前列数+1
需要修改demo7.php
最终源码
demo6.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实战:表格自动生成器</title>
<style type="text/css">
h3
{
color:coral;/*字体颜色：橘黄*/
margin-left:60px;/*左外边距60px*/
}
button
{
width:80px;
height:30px;
margin-left:20px;/*左外边距20px*/
border:none;/*去除边框*/
background-color:coral;/*背景：橘黄*/
color:white;/*字体颜色：白色*/
}
</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.js"></script><!--引入jquery-->
<script type="text/javascript">
$('button:first').on('click',function()
{
// alert(1)
//第一步:遍历并验证用户的输入信息
//$(选择器).each(对象索引,当前对象):用来循环遍历获取到所有jquery对象
//$(':input')可以获取所有input标签 textarea checkboxs button的数据
//当前表单只有input标签和button 要获取输入的数据就要过滤掉button 并使用each遍历
$(':input').not('button').each(function(index,obj){
//index:当前索引 obj：当前对象 即获取到的两个input内容的对象
// alert($(obj).val())
if($(obj).val().length==0)
{
//在当前元素后添加提示信息
$(obj).after('<span style="color:red">不能为空！</span>')
setTimeout(function(){
$(obj).next().remove()
},1000)
return false
}
//非数字判断
else if(isNaN($(obj).val()))
{
//在当前元素后添加提示信息
$(obj).after('<span style="color:red">只能输入数字！</span>')
setTimeout(function(){
$(obj).next().remove()
},1000)
return false
}
//输入的数值必须大于0 且小于等于15
else if($(obj).val()<=0 || $(obj).val()>15)
{
//在当前元素后添加提示信息
$(obj).after('<span style="color:red">数值必须大于0,且小于等于15！</span>')
setTimeout(function(){
$(obj).next().remove()
},1000)
return false
}
})
//第二点:处理用户的请求(Ajax实现)
//只有用户第一次点击并提交的是正确数据才能生成表格
//防止用户生成无数个表格
$.get(
'demo7.php',//1.请求处理的脚本
{
//发送数据的变量名为rows,值为名为rows的输入框输入的数据
rows:$('input[name="rows"]').val(),
//发送数据的变量名为cols,值为名为cols的输入框输入的数据
cols:$('input[name="cols"]').val()
},//2.向脚本发送的数据
function(data)//成功的回调函数，data就是用于生成表格的数据
{
//先将上一次生成的表格删除
$('p:last').next().remove()
//在最后一个p标签（即重置按钮）后面生成表格
$('p:last').after(data)
})
})
//重置按钮
$('button').eq(1).click(function(){
//将行与列数据全部清空
$(':input').not('button').val('')
//将输入焦点重置到行文本框上
$(':input:first').focus()
//将上一次请求生成的表格删除
$('p:last').next().remove()
})
</script>
</body>
</html>
demo7.php
demo7.php
<?php
//判断用户的请求类型是否合法,必须是GET请求
if($_SERVER['REQUEST_METHOD']=='GET')
{
//如果用户发送的数据全部存在且不为空
if(!empty($_GET['rows']) && !empty($_GET['cols']))
{
$rows=$_GET['rows'];
$cols=$_GET['cols'];
//创建表格的基本架构,采用字符串拼接方式,最后统一生成,提高效率
$str1="<table border='1' cellspacing='0' cellpadding='3' align='center' width='80%'>";
// 1.生成表头语句
$str2="<tr align='center'bgcolor='#faebd7'>";
for($i=0;$i<$cols;$i++)
{
$str2.="<td>*</td>";
}
$str2.="</tr>";
$str3="";
//2.双重for循环生成表格内容区
for($r=0;$r<$rows;$r++)
{
$str3 .="<tr align='center'>";
for($c=0;$c<$cols;$c++)
{
$data=$r*$cols+$c+1;
$str3.="<td>".$data."</td>";
}
$str3.="</tr>";
}
$table=$str1.$str2.$str3."</table>";
echo $table;
}
}
else
{
exit('<span style="color:red">非法请求</span>');
}
执行：
铃惯淑团溪珊寐栋烂掂技欺刻