![[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
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格生成器</title>
<style type="text/css">
h2 {
color: green;
margin-left:80px;
}
button {
width: 80px;
height: 30px;
border: none;
background-color: green;
color:white;
margin-left: 60px;
}
button:hover {
cursor: pointer;
background-color: coral;
}
</style>
</head>
<body>
<h2>表格生成器</h2>
<p><label for="title">请输入表格的标题：</label><input type="text" name="title" id="title" placeholder="选填"></p>
<p><label for="rows">请输入表格的行数：</label><input type="text" name="rows" id="rows" placeholder="必填"></p>
<p><label for="cols">请输入表格的列数：</label><input type="text" name="cols" id="cols" placeholder="必填"></p>
<p><button id="submit">生成</button> <button id="reset">删除</button></p>
</body>
</html>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("#submit").click(function(){
$("input:gt(0)").each(function(){
$(this).next().remove();
if( $(this).val().length == 0){
$(this).after("<span style='color:red;'>数据不能为空</span>");
$(this).focus() ;
return false ;
}else if( $(this).val() == 0 ){
$(this).after("<span style='color:red;'>数据必大于0</span>");
$(this).focus() ;
return false ;
}else if( isNaN($(this).val()) ){
$(this).after("<span style='color:red;'>数据必须是数字</span>");
$(this).focus() ;
return false ;
}
})
$.get(
"tableShow.php", //url
{
title:$('input[name = "title"]').val(),
rows:$('input[name = "rows"]').val(),
cols:$('input[name = "cols"]').val()
}, //data
function(data){
//先将上一次生成的表格删除
$('p:last').next().remove()
//生成新的表格
$('p:last').after(data)
} //sussess
)
})
$("#reset").click(function(){
$("#submit").not('button').val('') ;
$("#submit").focus() ;
$("p:last").next().remove() ;
})
</script>点击 "运行实例" 按钮查看在线实例
PHP:
<?php
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-weight:bold; line-height: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;
$table .= '<td align="center">'.++$data.'</td>';
}
$table .= '</tr>';
}
$table .= '</table>';
echo $table;
exit();
}
} else {
exit('<span style="color:red">请求类型错误</span>');
}
?>点击 "运行实例" 按钮查看在线实例
