![[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
1.输入页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>快速表格</title>
<style type="text/css">
button{
border: none;
background-color: blue;
color: white;
margin-left: 20px;
}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').eq(1).click(function(){
//将行与列数据全部清空
$(':input').not('button').val('')
//将输入焦点重置到行文本框上
$(':input:first').focus()
//将上一次请求生成的表格删除
$('p:last').next().remove()
//重置请求状态为true:允许用户请求
flag = 0
})
$('button:first').click(function(){
var flag = 0;
// // 1.验证表格标题不能为空
var titleVal = $('input:first').val();
if(titleVal == ""){
$('p:first').append("<span style='color:red'>标题不能为空</span>")
setTimeout(function(){
$('span').remove();
},2000)
$('input:first').focus()
return false;
}else if(titleVal.length>0){
$('input:first').parent().siblings().children('input').each(function(index,obj){
if($(obj).val() == ''){
$(obj).after('<span style="color:red">不能为空</span>')
setTimeout(function(){
$('span').remove();
},2000)
return false;
}else if(isNaN($(obj).val())){
$(obj).after('<span style="color:red">应输入数字</span>')
setTimeout(function(){
$('span').remove();
},2000)
return false;
}else if($(obj).val()<=0){
$(obj).after('<span style="color:red">数值不能为零</span>')
setTimeout(function(){
$('span').remove();
},2000)
return false;
}
})
//ajax
if(flag == 0){
$.ajax({
url:'table.php',
type:'GET',
data:{
title:$('input[name=title]').val(),
rows: $('input[name="rows"]').val(),
cols: $('input[name="cols"]').val()
},
success:function(msg,status,xhr){
// console.log(msg)
// $('#email').empty();
// $('#email').append($(msg));
$('p:last').next().remove()
$('p:last').after(msg)
flag = 1;
}
})
}
//
}
// $('input:first').parent().siblings().children('input').css({"color":"red","border":"2px solid red"});
})
})
</script>
</head>
<body>
<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>生成表格</button> <button>输入重置</button>
</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2.PHP数据生成
<?php
$title = $_GET['title'];
$rows = $_GET['rows'];
$cols = $_GET['cols'];
$div = "<div>";
$div.="<h2 align=center>{$title}</h2>";
// echo $biaoti;
$table = '<table border="1" cellspacing="0" cellpadding="3" align="center" width="80%"><tr>';
for($c = 0;$c<$cols;$c++){
$table.='<th>列名</th>';
}
$table.='</tr>';
for($r=0;$r<$rows;$r++){
$table.='<tr>';
for($c = 0;$c<$cols;$c++){
$number = $r*$cols + $c+1;
$table.='<td align=center>'.$number.'</td>';
}
$table.='</tr>';
}
$table = $table.'</table>';
$div.=$table.'</div>';
echo $div;点击 "运行实例" 按钮查看在线实例
