![[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>表格生成</title>
<style type="text/css">
h3 {
color: green;
margin-left: 70px;
}
button {
background-color: lightblue;
border: none;
color: white;
margin-left: 20px;
}
button:hover{
background-color: blue;
font-size: 1.05em;
cursor: pointer;
}
</style>
</head>
<body>
<h3>表格生成器</h3>
<p>表格标题： <input type="text" name="title"></p>
<p>输入行： <input type="text" name="rows"></p>
<p>输入列： <input type="text" name="cols"></p>
<p><button>生成表格</button><button>重置表格</button></p>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//创建请求标志,防止重复请求
var flag = true
//第一个按钮添加点击事件
$('button:first').click(function(){
//第一步:遍历并验证用户的输入信息
//$(选择器).each(对象索引,当前对象):用来循环遍历获取到所有jquery对象
$(':input').not('button').not('input:first').each(function(index,obj){
//非空判断
if ($(obj).val().length == 0) {
$(obj).after('<span style="color:red">不能为空</span>')
setTimeout(function() {
//2秒后,将提示信息删除
$(obj).next().remove()
}, 2000);
//返回让用户重新操作
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)
return false
}
})
//处理用户的请求(Ajax实现)
if (flag = true) {
$.get(
//url地址
'demo.php',
// 发送的请求参数
{
rows:$('input[name="rows"]').val(),
cols:$('input[name="cols"]').val(),
title:$('input[name="title"]').val()
},
// 请求成功的回调函数
function(data){
//先将上一次生成的表格删除
$('p:last').next().remove()
//生成新的表格
$('p:last').after(data)
//将请求标志设置为false,禁止重复请求
flag = false
}
)
}
})
//给重置按钮添加点击事件
$('button').eq(1).click(function(){
//将行与列数据全部清空
$(':input').not('button').val('')
//将输入焦点重置到行文本框上
$('input:first').focus()
//将上一次请求生成的表格删除
$('p:last').next().remove()
//重置请求状态为true:允许用户请求
flag = true
})
</script>
</html>点击 "运行实例" 按钮查看在线实例
<?php
//判断用户的请求类型是否是GET请求
if ($_SERVER['REQUEST_METHOD'] =='GET'){
//如果用户发送的数据全部存在且不为空
if (!empty($_GET['rows']) && !empty($_GET['cols'])) {
//用较短的变量名称进行转存
$rows = $_GET['rows'];
$cols = $_GET['cols'];
$title = $_GET['title'];
//创建表格的基本架构,采用字符串拼接方式,最后统一生成
$table = '<table border = "1" cellspacing = "0" cellpadding="3" width = "70%" align = "center">';
$table .= '<caption style="font-size:30px">'.$title.'</caption>';
//生成表头
$table .= '<tr align="center" bgcolor="lightgreen">';
for ($i=0; $i <$cols; $i++) {
$table .= '<th>X</th>';
}
$table .= '</tr>';
//生成表格内容区
for ($r=0; $r <$rows ; $r++) {
$table .= '<tr>';
for ($c=0; $c <$cols; $c++) {
//设置单元格的数据,数据与单元格数量对应
$data = $r*$cols+$c;
// ++$data: 可以确保从1开始计数
$table .= '<td align="center">'.++$data.'</td>';
}
$table .= '</tr>';
}
$table .= '</table>';
//将生成的表格返回到客户端
echo $table;
//结束当前脚本,可以省略
exit();
}
} else {
exit('<span style="color:red">请求类型错误</span>');
}点击 "运行实例" 按钮查看在线实例
课程总结
1.遍历 each 的用法—$(选择器).each(对象索引,当前对象):用来循环遍历获取到所有jquery对象
2.创建请求标志,防止重复请求的用法
3.怎么判断用户的请求类型—$_SERVER['REQUEST_METHOD'] == ‘GET’
4.设置单元格的数据,数据与单元格数量对应的公式—$data = $r*$cols+$c;