DOM结构：
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自动生成表格</title> <link rel="stylesheet" type="text/css" href="css/demo.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/demo.js"></script> </head> <body> <h2>自动表格生成器</h2> <p> <label for="caption">标题： </label> <input type="text" name="caption" id="caption"> </p> <p> <label for="rows">表格行：</label> <input type="text" name="rows" id="rows"> </p> <p> <label for="cols">表格列：</label> <input type="text" name="cols" id="cols"> </p> <p><button>生成表格</button><button>表格重置</button></p> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
css部分：设置样式
实例
h2{
margin-left: 35px;
color: skyblue;
}
input{
margin-bottom: 10px;
/*border: none;*/
border-color: lightgreen;
}
button{
width: 80px;
height: 30px;
margin-right: 20px;
background-color: green;
border: none;
color: white;
}
button:hover{
background-color: orange;
font-size: 1.05em;
font-weight: bolder;
cursor: pointer;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
Js部分：设置点击按钮事件（输入框不能为空，不能为0，不能是字母）
实例
$(document).ready(function(){
//创建请求标志，防止重复请求
var flag = true
//第一步：遍历并验证用户输入的信息
$('button:first').on('click',function(){
//$(选择器).each(对象索引，当前对象)：用来循环遍历获取到所有jQuery对象
$(':input').not('button').not(':input:first').each(function(index,obj){
//标题非空判断
if($(':input:first').val().length == 0){
$(':input:first').after('<span style="color:red">标题不能为空</span>')
setTimeout(function(){
$(':input:first').next().remove()
},1000)
return false
}
//非空判断
if($(obj).val().length == 0){
//在当前元素后添加提示信息
$(obj).after('<span style="color:red">不能为空</span>')
//用定时器使提示信息2秒后消失
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
//非0判断
}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(
//请求处理的脚本
'php/demo.php',
//发送的请求参数
{
caption:$('input[name="caption"]').val(),
rows:$('input[name="rows"]').val(),
cols:$('input[name="cols"]').val()
},
//请求成功的回调函数
function(msg){
//先将上次的表格删除
$('p:last').next().remove()
//生成新的表格
$('p:last').after(msg)
//将请求标志设置为false,禁止重复请求
flag = false
}
)
}
})
//重置按钮
$('button').eq(1).click(function(){
//将行与列数据全部情况清空
$('input').not('button').val('')
//将输入焦点重置到行文本框上
$('input:first').focus()
//将上一次请求生成的表格删除
$('p:last').next().remove()
//重置请求状态为true：允许用户请求
flag = true
})
})运行实例 »
点击 "运行实例" 按钮查看在线实例
PHP部分：实行生成表格的功能
实例
<?php
//判断用户的请求类型是否合法，必须是GET请求
if($_SERVER['REQUEST_METHOD'] == 'GET'){
//如果用户发送的数据全部存在且不为空
if(!empty($_GET['rows']) && !empty($_GET['cols']) && !empty($_GET['caption'])){
//用较短的变量名称进行转换
$caption = $_GET['caption'];
$rows = $_GET['rows'];
$cols = $_GET['cols'];
//创建表格的基本架构，采用字符串拼接方式，最后统一生成，提高效率
$table = '<table border="1" cellspacing="0" cellpadding="3" align="center" width="80%">';
$table .= '<caption style="color:red">'.'<strong>'.$caption.'</strong>'.'</caption>' ;
//下面用双重循环来生成这个表格
//1.生成表头
$table .= '<tr align="center" bgcolor="lightblue" style="color:yellow">';
for ($i=0; $i<$rows;$i++){
$w= $i+1;
$table .= '<th>'.$w.'</th>';
}
$table .= '</tr>';
//2.生成表格内容区
for($r=0;$r<$rows;$r++){
$table .= '<tr>';
for($c=0;$c<$cols;$c++){
//设置单元格的数据，数据与单元格数量对应($r是行)
$msg =$r*$cols +$c;
//++$msg:可以确保从1开始计数，以确保符合人类正常思维
$table .='<td align="center">'.++$msg.'</td>';
}
$table .= '</tr>';
}
$table .= '</table>';
//将生成的表格返回到客户端
echo $table;
//结束当前脚本，可以省，但最好是写上
exit();
}else{
exit('<span style="color:red">请求类型错误</span>');
}
}运行实例 »
点击 "运行实例" 按钮查看在线实例
运行效果图：
![]TPLPQ`LQJ_9J$QULO87(FQ.png](https://img.php.cn//upload/image/668/671/666/1523860867876204.png "1523860867876204.png")
总结：
1.运用$.get(URL，data,success)方法建立与服务器的连接
2.利用建立变量 var flag=true 为请求标志，防止用户重复请求
3.each(对象索引，当前对象)遍历输入框内输入内容的判断
4.用for（$i=0;$i<n;$i++）循环进行对表格内容的循环
5.判断用户采用的请求类型：$_SERVER['REQUEST_METHOD]==""
6.用字符串的方式，创建表格的基本架构：
$table ='';
$table .='<caption></caption>';
$table .=<tr>;
$table .='<th><th>';
$table .= '</tr>';
$table .='</table>';
7.结束当前脚本：exit();
