<html>
<head>
<meta charset="UTF-8">
<title>表格生成器</title>
<script type="text/javascript" src="jquery-3.2.1.min.js" ></script>
<style type="text/css">
.title{
color: #ffae00;
}
p{
font-size: 14px;
color: #555;
}
p input{
border:solid 1px #ffae00;
outline: none;
}
p button{
float: left;
color: #fff;
background-color: #ffae00;
padding: 5px 10px;
margin: 5px 10px;
border: none;
border-bottom:solid 2px rgba(0,0,0,0.2);
outline: none;
cursor: pointer;
}
p button:hover{
box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<div class="title">表格生成器</div>
<p>请输入行数 <input type="text" name="biaotou"/></p>
<p>请输入行数 <input type="text" name="rows"/></p>
<p>请输入列数 <input type="text" name="cols"/></p>
<p><button>点击生成</button><button>重置表格</button></p>
<script>
var flag = true;
$('button:first').on('click',function(){
//开始第一步遍历且验证用户输入信息
//$(选择器).each(对象索引,当前对象):用来遍历获取到的所有的jquery对象.
$(':input').not('button').each(function(index,obj){
//非空判断
if($(obj).val().length == 0 ){
//在当前元素后面加提示信息
$(obj).after('<span style="color: #700505;">不能为空的亲</span>');
//使用定时器 2s后消失
setTimeout(function(){
$(obj).next().remove();
},1500)
return false;
} else if(isNaN($(obj).val())){//输入是否数字
$(obj).after('<span style="color: #700505;">必须是数字</span>');
//使用定时器2s消失
setTimeout(function(){
$(obj).next().remove();
},1500)
return false;
} else if($(obj).val() <= 0 ){//输入是否小于0
$(obj).after('<span style="color: #700505;">必须大于零</span>');
setTimeout(function(){
$(obj).next().remove();
},1500)
return false;
}
})
//处理ajax请求
if(flag == true){
$.get(
//请求到php文件
'test.php',
//2.发送请求参数
{ biaotou: $('input[name="biaotou"]').val(),
rows: $('input[name="rows"]').val(),
cols: $('input[name="cols"]').val()
},
//3请求成功的回调函数
function(data){
//将上次生成的表格删除
$('p:last').next().remove();
//生成新表格
$('p:last').after(data)
flag = false
}
)
}
//重置按钮
$('button').eq(1).click(function(){
//将行与列的数据全部删除
$(':input').not('button').val('')
//将焦点放到文本框上
$(':input:first').focus()
//将上次生成的表格生成
$('p:last').next().remove
//清楚后可以再次生成表格 改为true
flag = true
})
})
</script>
</body>
</html>
下面是php代码
<?php
//判断用户是否非法输入，必须是GET请求($_SERVER['REQUEST_METHOD'] == 'GET') {
if($_SERVER['REQUEST_METHOD'] == 'GET'){
if(!empty($_GET['biaotou']) && !empty($_GET['rows']) && !empty($_GET['cols'])){
// 变量储存
$biaotou=$_GET['biaotou'];
$rows=$_GET['rows'];
$cols=$_GET['cols'];
//创建表格
$table = '<table border ="1" cellspacing="0" cellpadding="3" align="center" width="80%">';
$table .= '<th colspan="'.$cols.'">'.$biaotou.'</th>';//撑满宽度
//生成表头
$table .='<tr align="center" bgcolor="#e3e3e3">';
for($i=0;$i<$cols;$i++){
$table .= '<th>列</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;
exit();
}
}else{
exit('<span style="color:red">非法操作</span>');
}
?>
这是前端和后端结合的例子:用到jq的很多方法,比如$('button:first');选择第一个buttom,each(index,obj)括号分别为索引与当前对象遍历jq对象next()下一个,remove()移除当前元素isNaN()判断不是数字等等.
关于php代码:
$_SERVER['REQUEST_METHOD'] == 'GET' 必须用GET提交方式 .
$table .='' 创建表格的基本架构,采用字符串拼接方式,最后统一生成,提高效率.
总结jquery还有很多要学的东西,千万不要怠慢.另外只有php结合其他语言来做项目才能走的更远.更好.