Collection
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实战：表格生成器</title>
<style>
h3{
color:green;
margin-left: 40px;
}
button{
width:80px;
height: 30px;
border:none;
background-color: green;
color: white;
margin-left: 30px;
}
</style>
</head>
<body>
<!--非空验证，非数字，非正数-->
<h3>表格生成器</h3>
<p class="title"><label for="">请输入标题：<input type="text" name="title"></label></p>
<div class="content">
<p><label for="">请输入行：<input type="text" name="rows"></label></p>
<p><label for="">请输入列：<input type="text" name="cols"></label></p>
</div>
<p class="button"><button>生成表格</button><button>重置表格</button></p>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
//创建请求标志，防止重复请求
var flag = true;
$('button:first').on('click', function () {
// 第一步：遍历并验证用户输入的信息，
// 标题非空，非数字判断
if($('input[name="title"]').val().length == 0){
$('input[name="title"]').after('<span style="color: red;">不能为空</span>');
setTimeout(function () {
$('input[name="title"]').next().remove();
},2000)
return false;
}else if(!isNaN( $('input[name="title"]').val())){
$('input[name="title"]').after('<span style="color: red;">不能是数字</span>');
setTimeout(function () {
$('input[name="title"]').next().remove();
},2000)
return false;
}
// 行列信息判断使用each()方法
// $(选择器).each(索引，当前对象相当于this)
//行和列非空判断，非数字判断,非正数判断,添加提示词，使用定时器，2s后消失
var flags = false;
$('.content input').each(function (index,obj) {
if($(obj).val().length==0){
$(obj).after('<span style="color: red;">不能为空</span>');
setTimeout(function () {
$(obj).next().remove();
},2000)
return flags = false;
}else if(isNaN($(obj).val())){
$(obj).after('<span style="color: red;">必须是数字</span>');
setTimeout(function () {
$(obj).next().remove();
},2000)
return flags = false;
}else if($(obj).val()<=0){
$(obj).after('<span style="color: red;">必须大于零</span>');
setTimeout(function () {
$(obj).next().remove();
},2000)
return flags = false;
}else{
flags = true;
}
});
//each()方法结束后进行ajax请求，不能验证通过都返回false，只有验证通过才返回true，
// 第二步：处理用户的请求，使用ajax
if(flag == true && flags==true){
$.get(
'demo2.php',{
title:$('input[name="title"]').val(),
rows:$('input[name="rows"]').val(),
cols:$('input[name="cols"]').val(),
}, function(data) {
$('p:last').after(data);
flag=false;
}
)
}
})
//重置按钮：清空标题，行和列；清空上次生成的表格，将光标置于第一个input上
$('button:last').on('click',function(){
$(':input').val('');
$('.button').nextAll().remove();
$(':input:first').focus();
flag= true;
})
</script>
</body>
</html>
实例
<?php
//判断用户的请求类型是否合法，必须是GET
if($_SERVER['REQUEST_METHOD'] == 'GET'){
//如果用户发送的数据存在且不为空
if(!empty($_GET['title'])){
$title = '<p style="text-align: center;color: green;font-weight: bold;">'.$_GET['title'].'</p>';
}
if(!empty($_GET['rows']) && !empty($_GET['cols'])){
$rows = $_GET['rows'];
$cols = $_GET['cols'];
//创建表格的基本架构
$table = '<table border="1" cellspacing="0" cellpadding="3" align="center" width="80%">';
//双重循环生成表格
// 1.生成表格表头
$table.='<tr align="center" bgcolor="lightgreen">';
for($i=0;$i<$cols;$i++){
$table.='<th>表头</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 $title.$table;
}
}else{
exit('<span style="color:red">非法请求</span>') ;
}
运行实例 »
点击 "运行实例" 按钮查看在线实例点击 "运行实例" 按钮查看在线实例
