![[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">
<title>表格自动生成器</title>
<style type="text/css">
body{
background-color: seagreen;
}
h3{
padding-left: 50px;
color: black;
}
button{
margin-left: 50px;
color: black;
border: none;
background-color: lightpink;
}
span{
padding-left: 40px;
}
table{
width: 80%;
}
</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 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(){
// alert(1)
$(':input').not('button').each(function(index,obj) {
if ($(obj).val().length == 0){
$(obj).after('<span style="color:red">不能为空</span>')
setTimeout(function(){
$(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">必须大于零</span>')
setTimeout(function(){
$(obj).next().remove()
},2000)
return false
}
if(flag==true){
$.get('demo2.php',{
rows : $('input[name="rows"]').val(),
cols : $('input[name="cols"]').val()
},function(data){
$('p:last').after(data)
flag = false
})
}
})
$("").click(function(){
$("#submit").not('button').val('') ;
$("#submit").focus() ;
$("p:last").next().remove() ;
})
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<?php
ini_set("display_errors", "On");
error_reporting(E_ALL | E_STRICT);
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>'.$title.'</caption>';
$table .= '<tr align="center" bgcolor="lightgray">';
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>');
}
?>点击 "运行实例" 按钮查看在线实例
效果图：
![31JBM~0%9SS~WDT4)@6VW]4.png](https://img.php.cn//upload/image/559/708/510/1523952748971997.png "1523952748971997.png")
