表格生成器，前端与后端进行数据交互，使用循环输入表格
HTML 源码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格生成器</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <!-- <script type="text/javascript" src="js/table.js"></script> --> <script type="text/javascript" src="js/create.js"></script> <!-- <script type="text/javascript" src="js/test.js"></script> --> </head> <body> <div> <p> <label for="tab-t">生成头</label> <input type="text" name="tab-t" id="tab-t" placeholder="标题"> </p> <p> <label for="tab-r">生成行</label> <input type="text" name="tab-r" id="tab-r" placeholder="行"> </p> <p> <label for="tab-c">生成列</label> <input type="text" name="tab-c" id="tab-c" placeholder="列"> </p> <p> <button>生成</button> <button>重置</button> </p> </div> </body> </html>
CSS 源码
.main{
width: 500px;
border: 1px solid #ccc;
border-radius: 20px;
margin: auto;
}
.main p{
margin-left: 30px;
}
.main button{
border: 0px;
width: 80px;
height: 30px;
background-color: green;
color: white;
}JS 源码
$(document).ready(function(){
var flag=true
$('button:first').click(function(){
if($('#tab-t').val().length==0){
var plac = $('#tab-t').attr('placeholder')
var msg = '<span style="color:red;">'+plac+'不能为空！</span>'
//如果为空则提示
$('#tab-t').after(msg)
setTimeout(function(){
$('#tab-t').next().remove()
$('#tab-t').focus()
},2000)
return false
}else{
//开始循环提交的 行 和 列
$('input').not($('#tab-t')).each(function(index,obj){
if($(obj).val().length==0){
//得到文本提示
var plac = $(obj).attr('placeholder')
var msg = '<span style="color:red;">'+plac+'不能为空！</span>'
//如果为空则提示
$(obj).after(msg)
setTimeout(function(){
$(obj).next().remove()
$(obj).focus()
},2000)
return false
}else if(isNaN($(obj).val())){
var msg = '<span style="color:green;">输入必须为数字！</span>'
//如果为空则提示
$(obj).after(msg)
setTimeout(function(){
$(obj).next().remove()
$(obj).focus()
},2000)
return false
}else if($(obj).val() <= 0){
// console.log('--'+$(obj).val())
var msg = '<span style="color:green;">输入数必须大于0！</span>'
//如果为空则提示
$(obj).after(msg)
setTimeout(function(){
$(obj).next().remove()
$(obj).focus()
},2000)
return false
}else{
//开始提交
// $.get(url, data, success)
if(flag){
$.get(
//1.请求处理的脚本
'admin/table.php',
//2.发送的请求参数
{
tab_t:$('#tab-t').val(),
tab_r:$('#tab-r').val(),
tab_c:$('#tab-c').val()
},
//3.请求成功的回调函数
function(data){
//先将上一次生成的表格删除
$('p:last').next().remove()
//生成新的表格
$('p:last').after(data)
}
)
flag = false //提交一次之后设置为 false 防止重复提交
}
//
}
})
}
})
//重置
$('button:last').click(function(){
$(':input').val('') //清空所有 input
$('h2').remove()
$('table').remove()
$(':input:first').focus()
flag=true
})
})PHP 源码
<?php
//判断用户的请求类型是否合法,必须是GET请求
if ($_SERVER['REQUEST_METHOD'] == 'GET') {
//如果用户发送的数据全部存在且不为空
if (!empty($_GET['tab_t']) && !empty($_GET['tab_r']) && !empty($_GET['tab_c'])) {
//获取提交过来的数据
$tb_t = $_GET['tab_t'];
$tb_r = $_GET['tab_r'];
$tb_c = $_GET['tab_c'];
$table = '<h2 style="color:green;text-align: center;">'.$tb_t.'</h2>';
//创建表格的基本架构,采用字符串拼接方式,最后统一生成,提高效率
$table .= '<p><table border="1" cellspacing="0" cellpadding="3" align="center" width="80%">';
//下面用双重循环来生成这个表格
//1生成表头
$table .= '<tr align="center" bgcolor="lightgreen">';
for ($i=0; $i<$tb_c; $i++) {
$table .= '<th>第：'.($i+1).'列</th>';
}
$table .= '</tr>';
//2.生成表格内容区
//外层行循环
for ($r=0; $r<$tb_r; $r++) {
$table .= '<tr>';
//内层列循环
for($c=0; $c<$tb_c; $c++) {
//设置单元格的数据,数据与单元格数量对应
$data = $r*$tb_c+$c;
// ++$data: 可以确保从1开始计数,以确保符合人类正常思维
$table .= '<td align="center">'.++$data.'</td>';
}
$table .= '</tr>';
}
$table .= '</table></p>';
//将生成的表格返回到客户端
echo $table;
//结束当前脚本,可以省略,但写上该语句是一个很好的编程习惯
exit();
}
} else {
exit('<span style="color:red">请求类型错误</span>');
}