![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自动生成表格工具</title>
<style>
h3 {
color: green;
margin-left: 40px;
}
button {
border: none;
background-color: green;
margin-left: 40px;
color: white;
padding: 5px;
}
button:hover {
background-color: lightgrey;
color: black;
}
</style>
</head>
<body>
<h3>自动生成表格工具</h3>
<p><label>输入表格的名称：<input type="text" name="title"></label></p>
<p><label>输入行：<input type="text" name="rows"></label></p>
<p><label>输入列：<input type="text" name="cols"></label></p>
<p>
<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').click('on', function () {
//第一步：遍历并验证用户信息
//$(选择器).each(对象索引，当前对象)
$(':input').not('button').each(function (index, obj) {
if ($(obj).val().length == 0) { //非空判断
$(obj).after('<span style="color: red">不能为空</span>')
setInterval(function () {
$(obj).next().remove()
}, 2000)
} else if (isNaN($(obj).val())) { //非数字判断
$(obj).after('<span style="color: red">必须是数字</span>')
setInterval(function () {
$(obj).next().remove()
}, 2000)
} else if ($(obj).val() <= 0) { //非零判断
$(obj).after('<span style="color: red">必须大于零</span>')
setInterval(function () {
$(obj).next().remove()
}, 2000)
return false
}
})
//处理用户请求
if (flag == true) {
$.get(
'data.php',
{
title: $(':input[name="title"]').val(),
rows: $(':input[name="rows"]').val(),
cols: $(':input[name="cols"]').val()
},
function (data) {
$('p:last').next().remove()
$('p:last').after(data)
flag == false
})
}
});
//重置按钮
$('button').eq(1).click(function () {
$(':input').not('button').val("");
$('input').eq(0).focus();
$('p:last').next().remove();
flag = true;
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<?php
//判断用户的请求类型是否合法，必须是GET
if ($_SERVER['REQUEST_METHOD'] == 'GET') {
//如果用户发送的数据存在且不为空
if (!empty($_GET['title']) && !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="margin-bottom: 20px;font-size: 16px;font-weight:bold;color: green">' . $title . '</caption>';
//生成表头
$table .= '<tr align="center" bgcolor="#add8e6">';
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;
$table .= '<td align="center">' . ++$data . '</td>';
}
$table .= '</tr>';
}
$table .= '</table>';
echo $table;
exit();
}
} else {
exit('<span style="color: red">非法请求</span>');
}点击 "运行实例" 按钮查看在线实例
