实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/todc-bootstrap/3.1.1-3.2.1/todc-bootstrap.min.css"/>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="" type="text/javascript" charset="utf-8"></script>
<script src="http://apps.bdimg.com/libs/layer/2.1/layer.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.active{
width: 500px;
height: 200px;
margin: auto;
background: #ECECEC;
border-radius: 10px;
}
form{
text-align: center;
}
</style>
<title>实战：表格自动生成器</title>
</head>
<body>
<div class="active">
<form action="require.php" method="post">
<h1>表格生成器</h1>
<p>表格名称：<input type="text" name="head" id="head" value="" placeholder="表格名称"/></p>
<p>表格的行：<input type="text" name="rows" id="rows" value="" placeholder="请输入行"/></p>
<p>表格的列：<input type="text" name="cols" id="cols" value=""placeholder="请输入列" /></p>
<p><input class="btn btn-primary" type="button" name="reg" id="reg" value="生成" />
<input class="btn btn-primary" type="button" name="reset" id="reset" value="清空" />
</p>
</form>
</div>
</body>
<script type="text/javascript">
$(function(){
//创建标志 防止重复请求
var flag = true;
//获取到按钮增加点击事件
$('#reg').on('click',function(){
//获取到符合的input表单，并循环
$(':input').not(':button,#head').each(function(index,obj){
//判断当前值的的长度是否为空
if ($(obj).val().length== 0 ) {
//对象后面增加元素
$(obj).after('<span style="color:red;" >不能为空</span>')
//设置定时器并清空增加的元素
setTimeout(function(){
//清空
$(obj).next().remove()
},2000)
//获取焦点
$(obj).focus()
return false
//判断是否为数值
} else if(isNaN($(obj).val())){
//对象后面增加元素
$(obj).after('<span style="color:red;" >必须为数值</span>')
//设置定时器并清空增加的元素
setTimeout(function(){
//清空
$(obj).next().remove()
},2000)
//焦点
$(obj).focus()
return false
//判断是否为0
} else if($(obj).val() <= 0){
//对象后面增加元素
$(obj).after('<span style="color:red;" >数值不能小于0</span>')
//设置定时器并清空增加的元素
setTimeout(function(){
//清空
$(obj).next().remove()
},2000)
//焦点
$(obj).focus()
return false
//判断表格标题是否为空
}
})
//判断标题是否为空
if ($('#head').val().length == 0) {
//layer 插件弹出层
layer.open({
content: '表格标题不能为空'
,btn: '我知道了'
});
}
//ajax 传值验证
//判断标识 防止重复请求
if (flag == true) {
//请求地址
var url = 'require.php'
//请求数据包 json
var data = {
'head':$('#head').val(),
'rows':$('#rows').val(),
'cols':$('#cols').val()
}
// 回调函数
var success = function(res){
console.log(res)
$('div:first').next().remove()
$('div:first').after(res)
}
//.get（）方法传参
$.get(url,data,success)
//回调后返回false 防止重复请求
flag = false;
}
})
$('#reset').on('click',function(){
//获取到所有的按钮的数值并清空
$(':input').val('')
//获取焦点
$('#head').focus()
//移除div下面的所有元素
$('div:last').nextAll().remove()
})
})
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<?php
//判断请求过来的方法是不是get
if ($_SERVER['REQUEST_METHOD']=='GET') {
//判断三个值是否为空
if (!empty($_GET['head']) && !empty($_GET['rows']) && !empty($_GET['cols'])) {
//请求到的数据赋值给变量
$rows = $_GET['rows'];
$cols = $_GET['cols'];
$head = $_GET['head'];
//字符串 生成表格
$table = "<table class='table-bordered table-hover' width='80%' align='center'style='text-align:center;'>";
// .= 字符串拼接
$table .= '<tr style="text-align:center;">';
//循环生成 表头
for ($i=0; $i < $cols ; $i++) {
$table .= "<th style='text-align:center;'>表头</th>";
}
$table .= '</tr >';
//循环生成表格区域 先循环出行 在内循环出列
for ($r=0; $r <$rows ; $r++) {
$table .= '<tr>';
for ($c=0; $c <$cols ; $c++) {
//输出表格的内容
$x = ($r+1)*($c+1);
$table .= "<td>{$x}</td>";
}
$table .= '</tr>';
}
$table .= '</table>';
//输出标题
echo "<h3 style='text-align:center;' >{$head}</h3>";
//整体输出表格主体
echo $table;
exit();
} else {
//没有获取到数据或者数据参数不全
echo '数据好像没有获取到哦';
}
} else {
exit('<span style="color:red;">请求类型错误，请使用get方式请求！！！</span>');
}
?>运行实例 »
点击 "运行实例" 按钮查看在线实例
