重温了部分css、jQuery、Ajax知识，目前学习还是比较死板，不能灵活应用，看代码都明白，以敲代码全糊涂，尤其是今天each循环遍历，用错了好几个选择器，自己认为还是练习的较少原因。
前台代码：
实例
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>表格自动生成器</title>
<style type="text/css">
fieldset{
width:300px;
margin:10px auto;
}
button{
width:80px;
height:20px;
border:none;
background-color:blue;
color:white;
margin-left:40px;
}
</style>
</head>
<body>
<div>
<fieldset>
<legend>表格生成工具</legend>
<p ><label>输入标题:<input type="text" name="title" ></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>
</fieldset>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$('button').eq(0).click(function() {
var flag=true
//第一步:遍历并验证用户的输入信息:input其中包括button
//非空判断
if($('input:first').val().length==0){
$('input:first').after('<span style="color:red">不能为空</span>')
setTimeout(function(){
$('input:first').next().remove()
},2000)
$(this).focus()
return false
}
$('input:gt(0)').each(function(){
if($(this).val().length==0){
// alert('message')
//在后面添加提示信息
$(this).after('<span style="color:red">不能为空</span>')
//用定时器使提示信息2秒后消失
setTimeout(function(){
$(this).next().remove()
},2000)
$(this).focus()
return false
//零值判断
}
else if (isNaN($(this).val())) {
$(this).after('<span style="color:red">必须是数字</span>')
setTimeout(function(){
$(this).next().remove()
},2000)
$(this).focus()
return false
//零值判断
}
else if($(this).val() <= 0) {
$(this).after('<span style="color:red">必须大于0</span>')
setTimeout(function(){
$(this).next().remove()
},2000)
$(this).focus()
return false
}
})
// 第二点:处理用户的请求(Ajax实现)
if (flag == true) {
$.get(
//1.请求处理的脚本
'table2.php',
//2.发送的请求参数
{
title:$('input[name="title"]').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
})
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
后台代码：
实例
<?php
/**
* @Author: Marte
* @Date: 2018-04-16 13:02:19
* @Last Modified by: Marte
* @Last Modified time: 2018-04-16 15:06:09
*/
if($_SERVER['REQUEST_METHOD']=='GET'){
if(!empty($_GET['rows'])&&!empty($_GET['cols'])){
$title=$_GET['title'];
$rows=$_GET['rows'];
$cols=$_GET['cols'];
$table = '<table border="1" cellspacing="0" cellpadding="3" align="center" width="80%">';
//生成标题
$table.='<caption style="font-size:1.5em;color:red">'.$title.'</caption>';
//用循环生成表格
//生成表头
$table .= '<tr align="center" bgcolor="#green">';
for($c=0;$c<$cols;$c++){
$table.='<th>表头</th>';
}
$table .= '</tr>';
//生成内容区
for ($r=0; $r<$rows; $r++) {
$table .= '<tr>';
for($c=0; $c<$cols; $c++) {
//设置单元格的数据,数据与单元格数量对应
$data = $r*$cols+$c;
// ++$data: 可以确保从1开始计数,以确保符合人类正常思维
$table .= '<td align="center">'.++$data.'</td>';
}
$table .= '</tr>';
}
$table .= '</table>';
//将生成的表格返回到客户端
echo $table;
//结束if当前脚本,可以省略,但写上该语句是一个很好的编程习惯
exit();
}
} else {
exit('<span style="color:red">请求类型错误</span>');
}运行实例 »
点击 "运行实例" 按钮查看在线实例
