表格自动生成器，demo.php文件
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实战：表格自动生成器</title>
<style>
.box{
width: 1000px;
height: auto;
/*background-color: lightblue;*/
padding: 10px;
margin: auto;
text-align: center;
}
button{
padding: 6px 15px;
border: none;
background-color: green;
color: #fff;
}
button:hover{
background-color: coral;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<p>
插入标题：<input type="text" name="title">
</p>
<p>
插入行：<input type="text" name="row">
</p>
<p>
插入列：<input type="text" name="col">
</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(){
//遍历并验证用户信息，not()方法中是剔除指定元素，仅对input元素进行判断
$(':input').not('button').each(function(index,obj){
//对输入框进行非空判断
if($(obj).val().length == 0){
//在当前元素后面插入span标签，并提示信息
$(obj).after('<span style="color:red;">不能为空</span>')
//使用定时器将提示延迟3秒消失
setTimeout(function(){
// 3秒后删除提示信息
$(obj).next().remove()
},3000)
//返回让用户重新操作
return false
//非零判断
} else if($(obj).val() <= 0){
//在当前元素后面插入span标签，并提示信息
$(obj).after('<span style="color:red;">必须大于零</span>')
//使用定时器将提示延迟3秒消失
setTimeout(function(){
// 3秒后删除提示信息
$(obj).next().remove()
},3000)
//返回让用户重新操作
return false
//非数字判断
} else if(isNaN($(obj).val())){
//在当前元素后面插入span标签，并提示信息
$(obj).after('<span style="color:red;">必须为数字</span>')
//使用定时器将提示延迟3秒消失
setTimeout(function(){
// 3秒后删除提示信息
$(obj).next().remove()
},3000)
//返回让用户重新操作
return false
}
})
if(flag == true) {
$.get(
'demo1.php',
{
title: $('input[name="title"]').val(),
row: $('input[name="row"]').val(),
col: $('input[name="col"]').val()
},
function(data){
$('p:last').next().remove()
//生成新的表格
$('p:last').after(data)
//将请求标志设置为false,禁止重复请求
flag = false
}
)
}
})
$('button:last').click(function(){
// 1.将行与列的数据全部清空
$(':input').not('button').val('')
$(':input:first').focus()
$('p:last').next().remove()
flag = true
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
demo1.php文件
实例
<?php
//判断用户的请求类型是否合法，必须是GET请求
if ($_SERVER['REQUEST_METHOD'] == 'GET'){
//如果用户发送的数据全部存在且不为空
if (!empty($_GET['row']) && !empty($_GET['col'])){
// 创建变量存储
$title = $_GET['title'];
$row = $_GET['row'];
$col = $_GET['col'];
// 创建表格的基本架构
$table = '<table border="1" width="80%" align="center" cellspacing="0" cellpadding="5">';
//创建标题元素
$table .= '<caption><h2>' . $title . '</h2></caption>';
//标题插入位置
$table .= '<tr>';
// 1.生成表头
$table .= '<tr bgcolor="lightblue">';
for( $i=0; $i<$col; $i++){
$table .= '<th border="1px solid">1</th>';
}
$table .= '</tr>';
// 2.生成表格内容
for($r=0; $r<$row; $r++){
$table .= '<tr>';
for($c=0; $c<$col; $c++){
// 在表格中加入内容
$data = $r*$col+$c;
$table .= '<td>'.++$data.'</td>';
}
$table .= '</tr>';
}
$table .= '</table>';
//生成表格返回到客户端
echo $table;
//结束当前脚本
exit();
}
} else{
exit('<span>请求的类型错误</span>');
}
运行实例 »
点击 "运行实例" 按钮查看在线实例
效果预览图：
