学习重点：
1、JQ选择器的熟练运用，选不对元素一切都是瞎搞；
2、元素的循环遍历方法each(),each(function(index,obj){...});
3、值的有效性判断很好处理，但是思路要宽广，不要遗漏判断；
4、ajax请求方式需熟练掌握，本例中防重复提交的flag的一直搞不出来，完全按照老师讲的位置添加都有问题，添加flag后控制台看不到get提交数据，点击按钮没得反应，后来我干脆把flag判断取消了便能实现效果，点击也不会多出来表格，只是控制台出现请求
5、循环的使用必须搞清楚，要熟练运用，很容易把自己循环晕；
6、表格标题的php调用，不要用单引号（不解析的），双引号能解决直接调用的问题，需复习前面的课程加深理解
demo1.php
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格自动生成器</title>
</head>
<style type="text/css">
.box{width: 800px;margin:0 auto;border:1px solid #666;}
h3{text-align: center;}
p{padding-left: 10px}
button{border:none;background: lightblue;width:60px;height:30px;text-align: center;margin-left: 10px}
</style>
<body>
<div class="box">
<h3>表格自动生成器</h3>
<p>
<label for="title">标题:</label>
<input type="text" name="title" id="title">
</p>
<p>
<label for="rows">行数:</label>
<input type="text" name="rows" id="rows">
</p>
<p>
<label for="cols">列数:</label>
<input type="text" name="cols" id="cols">
</p>
<p>
<button>提交</button><button>重置</button>
</p>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
//请求标识
var flag = true
//点击提交按钮动作
$('button').eq(0).on('click',function(){
if($(':input:first').val().length==0){
$(':input:first').after('<span style="color:red">请输入表格名！</span>')
setTimeout(function(){
// 1秒后清空警告语句
$(':input:first').next().remove()
},1000)
return false
}
// 验证输入
$(':input').not(':first').not('button').each(function(index,obj){
//each()函数遍历输入框信息
//判读是否为空值
if($(obj).val().length==0){
$(obj).after('<span style="color:red">数据不能为空!</span>')
setTimeout(function(){
// 1秒后清空警告语句
$(obj).next().remove()
},1000)
return false
// 判断是否为数字
}else if(isNaN($(obj).val())){
$(obj).after('<span style="color:red">必须为数字!</span>')
setTimeout(function(){
// 1秒后清空警告语句
$(obj).next().remove()
},1000)
return false
// 判断是否大于0
}else if($(obj).val()<=0){
$(obj).after('<span style="color:red">必须大于0!</span>')
setTimeout(function(){
// 1秒后清空警告语句
$(obj).next().remove()
},1000)
return false
}
})
// ajax $.get()提交
// if(flag == false){
$.get(//GET请求提交
//提交脚本
'demo2.php',
//提交的数据
{
title:$('input[name="title"]').val(),
rows:$('input[name="rows"]').val(),
cols:$('input[name="cols"]').val()
},
// 成功后回调函数
function(data){
// 清理上次生成
$('p:last').next().remove()
// 添加获得的数据
$('p:last').after(data)
// 防止重复请求
flag = false
}
)
// }
})
//重置按钮
$('button').eq(1).click(function(){
//将数据全部清空
$(':input').not('button').val('')
//将输入焦点重置首个文本框
$(':input:first').focus()
//将上一次请求生成的表格删除
$('p:last').next().remove()
//重置请求状态
flag = true
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
demo2.php
实例
<?php
// 判断请求方式，必须为GET方式，和demo1中的提交方式对应
if($_SERVER['REQUEST_METHOD'] == 'GET'){
//判断get值是否为空
if(!empty($_GET['rows']) && !empty($_GET['cols']) && !empty($_GET['title'])){
// 取到的值放到本脚本变量中保存
$title = $_GET['title'];
$rows = $_GET['rows'];
$cols = $_GET['cols'];
// 拼接表格
$table='<table border="1" cellspacing="0" cellspadding="3" align="center" width="80%">';
$table.="<caption><h3>$title</h3></caption>";
$table.='<tr bgcolor="lightgreen" align="center">';
//用一个循环做表头部分
for($i=0;$i<$cols;$i++){
$table.='<th>表头</th>';
}
$table.='</tr>';
//循环嵌套做表身部分
for($r=0; $r<$rows; $r++){
$table .= '<tr>';
for($c=0;$c<$cols;$c++){
$table .= '<td>内容</td>';
}
$table .= '</tr>';
}
$table .= '</table>';
//完成表格元素拼接后显示表格
echo $table;
exit();
}
}else{//如果不是$_GET请求报错
exit('<span style="color:red">请求类型错误!</span>');
}运行实例 »
点击 "运行实例" 按钮查看在线实例
运行效果：
