表格自动生成器实例-2018年4月16日16点30分
效果图：
思路：
html+css不重复说明，
主体分为三部分
第一部分：button1的事件和输入框的信息判断
1，为了防止出现用户重复提交的情况，需要创建一个标志，如用flag=true/false来判断是否执行后面的代码
2，给第一个button创建点击事件，并用循环遍历方法来获取所有jquery对象，遍历语法：$(':input').not(button).each(function(index,obj){})
3，三个input输入框值的条件判断：不能为空（length==0）/必须数字（isNaN）/正整数（<=0），判断返回插入到对应输入值的后面,$(obj).after()，其中需设置一个定时删除器已增加用户体验setTimeout(functhion(){$(obj).next().remove()},1500)；其中，第一个标题框我们需要进行删除isNaN的错误提示$('p span').eq(0).remove()，并取消retrun false的终止动作。
第二部分：ajax处理用户的请求
1，if(flag=true){$.get(url,data,succuss)flag=false} 设置标签禁止重复提交，url创建一个php执行脚本，data取出输入框内的对应信息，succuss请求成功的回调函数（直接插入到最后一个p标签的后面），由于运用了遍历方法，出现多份数据重复提交的情况，所以也会出现多次插入的情况，需要对多余的表格进行删除$('p:last').next().remove()
2，php脚本：if判断用户的请求类型是否是GET，判断用户输入的数据是否正常，创建表格架构，这里采用数据拼接的方法$table.=''(分别生成标题，循环生成表头，内容区的行和列)，最后再打印出表格.
第三部分：重置按钮
1，给按钮添加事件，2，清空行和列，3，重置焦点，4，删除生成的表格，5，设置flag=true,允许用户进行请求操作
代码详解：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动生成表格</title>
<style type="text/css">
h3{
color: orange;margin-left:50px;
}
p {
color:orange;
}
button{
width: 80px;height:30px;
border: none;background-color: orange;
color:white;margin-left:25px;
}
button:hover{
cursor: pointer;background-color: green;font-weight: bold;
}
</style>
</head>
<body>
<h3>表格生成器</h3>
<p><label>标 题:<input type="text" name="title"></label></p>
<p><label>输入行:<input type="text" name="cols"></label></p>
<p><label>输入列:<input type="text" name="rows"></label></p>
<p><button>生成表格</button>
<button>重置表格</button><caption></caption></p>
</body>
</html>
<script type="text/javascript " src="../js/jquery.js"></script>
<script type="text/javascript">
//创建标志，防止重复请求
// var flag=true
$('button').eq(0).on('click',function(){
var flag=true
//第一步:遍历并验证用户的输入信息
//$(选择器).each(对象索引,当前对象):用来循环遍历获取到所有jquery对象
// alert(1)
$(':input').not('button').each(function(index,obj){
//非空判断
if($(obj).val().length==0){
$(obj).after('<span style="color:red">不能为空！</span>')
setTimeout(function(){
$(obj).next().remove()
},1500)
return false
}
//数字判断
else if(isNaN($(obj).val())){
$(obj).after('<span style="color:red">请输入数字！</span>')
// 删除第一个span标签的提醒
$('p span').eq(0).remove()
setTimeout(function(){
$(obj).next().remove()
},1500)
// return false
}
//正数判断
else if ($(obj).val() <=0) {
$(obj).after('<span style="color:red">请输入正整数！</span>')
setTimeout(function(){
$(obj).next().remove()
},1500)
flag=false
}
//2，处理用户的请求 ajax实现
if(flag==true){
$.get('4161-1demo.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)
// 将请求标志设置为false,禁止重复请求
flag=false
}
)
}
})
})
//重置按钮
$('button').eq(1).on('click',function(){
//清空行和列
$(':input').not('button').val('')
//重置焦点
$(':input').eq(0).focus()
//删除上一次生成的表格
$('p:last').next().remove()
//重置状态为true，允许用户请求
flag =true
})
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
php脚本代码：
实例
<?php
//判断请求是否合法，必须是GET
if($_SERVER['REQUEST_METHOD']=='GET'){
// 判断用户发送的数据是否存在且不为空
if(!empty($_GET['title']) && !empty($_GET['rows']) && !empty($_GET['cols'])){
// 用较短的变量名进行转存
$title=$_GET['title'];
$rows=$_GET['rows'];
$cols=$_GET['cols'];
//创建表格的基本结构，字符拼接方法
$table = '<table border="1" cellspacing="0" cellpadding="3" align="left" width="30%" >';
//标题
$table .='<caption style="color:orange">'.$title.'</caption>';
// 用双层循环来生成表格
// 1，生成表头
$table .= '<tr align="center" bgcolor="lightgreen">';
for($i=0;$i<$cols;$i++){
$table .='<th bgcolor="orange">x</th>';
}
$table .='</tr>';
//生成表格内容区
//生成行
for($r=0;$r<$rows;$r++){
$table .='<tr>';
// 生成列
for($c=0;$c<$cols;$c++){
$data=$r*$cols+$c;
$table .='<td align="center">'.++$data.'</td>';
}
$table .='</tr>';
}
$table .='</table>';
echo $table;
}
}else{
exit('<span style="color:red">非法请求</span>');
}
?>运行实例 »
点击 "运行实例" 按钮查看在线实例
上一篇： css3布局属性有哪些