实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>6.实战：表格生成器</title>
<style type="text/css">
h3 {
color: green;
margin-left: 40px;
}
button {
width: 80px;
height: 30px;
border: none;
background-color: green;
color: white;
margin-left: 30px;
}
</style>
</head>
<body><!--
三个判断：
1.非空判断
2.非数字判断
3.非0判断 -->
<h3>表格生成器</h3>
<!-- p*2>label{输入行：}>input[type=text name=rows] -->
<p><label for="">输入行：<input type="text" name="rows"></label></p>
<p><label for="">输入列：<input type="text" name="cols"></label></p>
<!-- p>button{生成表格}*2 -->
<p><button>生成表格</button><button>重置行列</button></p>
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//创建请求标志，防止重复请求
var flag = true
$('button:first').on('click',function(){
// alert(1) //测试是否拿到数据
//第一步：遍历并验证用户输入的信息
//$(选择器).each(索引，当前对象)方法：逐个取出进行处理
//not 取反
$(':input').not('button').each(function(index,obj){
//非空判断
if ($(obj).val().length == 0){
//在当前元素的后面添加提示信息
$(obj).after('<span style="color:red">不能为空')
//用定时器清楚提示
setTimeout(function(){
$(obj).next().remove() //next是方法，后面要加圆括号()
},2000)
return false
}
//非数字判断
else if (isNaN($(obj).val())) {
//在当前元素的后面添加提示信息
$(obj).after('<span style="color:red">必须为数字')
//用定时器清楚提示
setTimeout(function(){
$(obj).next().remove() //next是方法，后面要加圆括号()
},2000)
return false
}
//非0判断($(obj).val() <=0)
else if ($(obj).val() <=0) {
//在当前元素的后面添加提示信息
$(obj).after('<span style="color:red">必须大于0')
//用定时器清楚提示
setTimeout(function(){
$(obj).next().remove() //next是方法，后面要加圆括号()
},2000)
return false
}
//第二步：处理用户的请求：ajax
if (flag == true)
//$.get(url,data,success)
$.get('demo7.php',{
rows: $('input[name="rows"]').val(),
cols: $('input[name="cols"]').val()
},function(data){
//最后一个P标签的后面，添加数据表格.注意：$('p:last')里面要记得加引号！
$('p:last').next().remove()
$('p:last').after(data)
flag = false
})
})
})
//重置按钮
$('button').eq(1).click(function(){
$(':input').not('button').val('')
$(':input:first').focus()
$('p:last').next().remove()
flag = true
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<?php
//判断用户的请求类型是否合法，必须是GET
if ($_SERVER['REQUEST_METHOD'] == 'GET'){
//如果用户发送的数据存在且不为空
if (!empty($_GET['rows']) && !empty($_GET['cols'])) {
//$_GET是超级全局变量,用GET方式从前端获取数据,然后判断里面的ROWS是否为空
$rows = $_GET['rows'];
$cols = $_GET['cols'];
//创建表格的基本结构
//cellspacing表格边框边距
//cellpadding单元格与数据之间的距离
$table = '<table border="1" cellspacing="0" cellpadding="3" align="center" width="80%">';
//下面用双重循环来生成表格
// <tr>
// <th>id</th>
// <th>name</th>
// </tr>
$table .='<tr align="center" bgcolor="lightgreen">'; // .= 拼接
//A~Z循环
//1.生成表头
for ($i=0; $i<$cols; $i++) {
$table .= '<th>X</th>';
}
$table .= '</tr>';
//2.生成表格的内容
for ($r=0; $r<$rows; $r++) {
$table .= '<tr>';
//生成列
for ($c=0; $c<$cols; $c++) {
$data = $r*$cols+$c;
$table .= '<td align="center">'.++$data.' </td>'; // .$data.' =>从零开始编号；.++$data.' =>从1开始编号
}
$table .='</tr>';
}
$table .= '</table>';
echo $table;
}
} else {
exit('<span style="color:red">非法请求');
}运行实例 »
点击 "运行实例" 按钮查看在线实例
