表格自动生成器
运行结果图
html代码：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>6.实战:表格自动生成器</title>
<style type="text/css">
body{}
div {width:100%;border:1px dashed #afafaf;text-align:center;padding-bottom:15px;background-color:#f3f3f3;}
h3 {color:#00b9e7;font-family:Microsoft YaHei;}
p {color:#8a8a8a;}
span{color:#f00;font-size:12px;}
table{border:solid #add9c0; border-width:1px 0px 0px 1px;line-height:2em;}
th {background-color:#00b9e7;text-align:center;color:#fff;border:solid #fff; border-width:0px 1px 0px 0px;}
td{border:solid #add9c0; border-width:0px 1px 1px 0px;}
button {width: 80px;height: 30px;border: none;background-color: #00b9e7;color:white;margin-right: 30px;}
button:hover{background-color: #f28e00;}
</style>
</head>
<body><div>
<h3>表格生成器</h3>
<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>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//创建请求标志,防止重复请求
var flag = true
//获取第一个输入框
$('button:first').on('click',function(){
$('input:eq(0)').not('button').each(function(index,obj){
//非空判断
if ($(obj).val().length == 0) {
$(obj).after('<span>不能为空</span>') //在当前元素后添加提示信息
setTimeout(function(){ //2秒后,将提示信息删除
$(obj).next().remove()
},2000)
return false //返回重新操作
//非数字判断
} else if ($(obj).val() <= 0) {
$(obj).after('<span>必须大于0</span>')
setTimeout(function(){
$(obj).next().remove()
},2000)
return false
}
// alert($('input[name="title"]').val())
})
//获取第二个输入框
$('input:eq(1)').not('button').each(function(index,obj){
//非空判断
if ($(obj).val().length == 0) {
$(obj).after('<span>不能为空</span>') //在当前元素后添加提示信息
setTimeout(function(){
$(obj).next().remove()
},2000)
return false
//非数字判断
} else if (isNaN($(obj).val())) {
$(obj).after('<span>必须是数字</span>')
setTimeout(function(){
$(obj).next().remove()
},2000)
return false
//零值判断
} else if ($(obj).val() <= 0) {
$(obj).after('<span>必须大于0</span>')
setTimeout(function(){
$(obj).next().remove()
},2000)
return false
}
// alert($('input[name="rows"]').val())
})
//获取第三个输入框
$('input:eq(2)').not('button').each(function(index,obj){
//非空判断
if ($(obj).val().length == 0) {
$(obj).after('<span>不能为空</span>')
setTimeout(function(){
$(obj).next().remove()
},2000)
return false
//非数字判断
} else if (isNaN($(obj).val())) {
$(obj).after('<span">必须是数字</span>')
setTimeout(function(){
$(obj).next().remove()
},2000)
return false
//零值判断
} else if ($(obj).val() <= 0) {
$(obj).after('<span>必须大于0</span>')
setTimeout(function(){
$(obj).next().remove()
},2000)
return false
}
// alert($('input[name="cols"]').val())
})
//Ajax处理用户的请求
if (flag == true) {
$.get(
'demo.php', //1.请求处理的脚本
//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()
flag = true
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
php代码
实例
<?php
//判断用户的请求类型是否合法,必须是GET请求
if ($_SERVER['REQUEST_METHOD'] == 'GET') {
//如果用户发送的数据全部存在且不为空
if (!empty($_GET['rows']) && !empty($_GET['cols'])) {
//用较短的变量名称进行转存
// $T_title = $_GET['T_title'];
$rows = $_GET['rows'];
$cols = $_GET['cols'];
//创建表格的基本架构,采用字符串拼接方式,最后统一生成,提高效率
$table = '<h3>'.$_GET['title'].'</h3>';
$table .= '<table cellspacing="0" cellpadding="3" align="center" width="80%">';
//下面用双重循环来生成这个表格
//1生成表头
$table .= '<tr>';
for ($i=0; $i<$cols; $i++) {
$table .= '<th>X</th>';
}
$table .= '</tr>';
//2.生成表格内容区
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 '<h3 align="center">'.$_GET['title'].'</h3>'.$table;
echo $table;
exit();
}
} else {
exit('<span style="color:red">请求类型错误</span>');
}运行实例 »
点击 "运行实例" 按钮查看在线实例
