![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>6.实战：表格生成器</title>
<style>
h3{
color:green;
margin-left: 40px;
}
button{
width: 80px;
height: 30px;
border: none;
background-color: green;
color: white;
margin-left: 30px;
}
button:hover{
cursor:pointer;
background-color: #ffa400;
}
</style>
</head>
<body>
<h3>表格生成器</h3>
<p><label for="">标题栏：<input type="text" name="title"></label></p>
<p><label for="">输入行：<input type="text" name="rows"></label></p>
<p><label for="">输入列：<input type="text" name="cols"></label></p>
<p><button>生成表格</button><button onclick="unset()">重置行列</button></p>
</body>
</html>
<script src="../js/jquery-3.3.1.js"></script>
<script>
//重置按钮
function unset(){
$(':input').not('button').val('')
$(':input:first').focus()
$('p:last').next().remove()
flag = false
}
//创建请求标志，防止重复请求
var flag = false
$('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)
unset()
return false
}
//$(选择器).each(对象索引，当前对象)
$('input:gt(0)').each(function(index,obj){
//非空判断
// alert($(obj).val)
if($(obj).val().length == 0){
//在当前元素的后面添加提示信息
$(obj).after('<span style="color:red">不能为空</span>')
setTimeout(function(){
$(obj).next().remove()
},2000)
unset()
return false
//非数字判断
}else if(isNaN($(obj).val())){
//在当前元素的后面添加提示信息
$(obj).after('<span style="color:red">必须为数字</span>')
setTimeout(function(){
$(obj).next().remove()
},2000)
return false
}else if($(obj).val() <= 0){
//在当前元素的后面添加提示信息
$(obj).after('<span style="color:red">必须大于0</span>')
setTimeout(function(){
$(obj).next().remove()
},2000)
unset()
return false
}
})
//第二步：处理用户请求：ajax
if(flag == false){
$.get(
"demo7.php",
{
title: $('input[name="title"]').val(),
rows : $('input[name="rows"]').val(),
cols : $('input[name="cols"]').val()
},
function(data){
alert(data)
$('p:last').next().remove()
$('p:last').after(data)
flag = true
})
}
})
</script>点击 "运行实例" 按钮查看在线实例
php脚本代码
<?php
//判断用户请求是否合法，必须时GET
if($_SERVER['REQUEST_METHOD'] == 'GET'){
if(!empty($_GET['rows']) && !empty($_GET['cols'])){
$title = $_GET['title'];
$rows = $_GET['rows'];
$cols = $_GET['cols'];
//创建表格得基本结构
$table = '<table border="1" cellspacing="0" cellpadding="3" align="center" width="80%">';
$table .= '<caption style="font-size:1.3em;color:#0aa344;"><h2>'.$title.'</h2></caption>';
//下面用双重循环来生成表格
//1.生成表头
$table .= '<tr align="center" bgcolor="lightgreen"> ';
for($i=0;$i<$cols;$i++){
$table .= '<th> X </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 $table;
exit();
}
}else{
exit('<span style="color:red">非法请求</span>');
}点击 "运行实例" 按钮查看在线实例
