通过本次课的学习和作业的完成，基本学会了数组的创建,访问与更新；常量的声明,赋值与输出；变量运算；条件判断与多分支语句；循环结构等内容，有了很大的提升。
实战:表格自动生成器的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>6.实战:表格自动生成器</title>
<style type="text/css">
button {
width: 80px;
height: 30px;
border: none;
background-color: green;
color:white;
margin-right: 30px;
}
</style>
</head>
<body>
<fieldset style=" width:350px">
<legend style="background-color: green; color:white">表格生成器</legend>
<p><label>输入表格名称：<input type="text" name="name" id="name"></label></p>
<p><label>输入表格行数：<input type="text" name="rows" id="rows"></label></p>
<p><label>输入表格列数：<input type="text" name="cols" id="cols"></label></p>
<p><button>生成表格</button><button>重置表格</button></p>
</fieldset>
<p></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(对象索引，当前对象)
$('input:first').each(function(index,obj){
// alert($(obj).val())
// 非空判断
if ($(obj).val().length == 0) {
// 在当前元素的后面添加提示信息
$(obj).after('<apan style="color:red">不能为空</span>')
// 用定时器清空提示
setTimeout(function(){
$(obj).next().remove()
},1000)
return false
}
})
$('input:input').not('input:first').each(function(index,obj){
// 非空判断
// alert($(obj).val())
if ($(obj).val().length == 0) {
// 在当前元素的后面添加提示信息
$(obj).after('<apan style="color:red">不能为空</span>')
// 用定时器清空提示
setTimeout(function(){
$(obj).next().remove()
},1000)
return false
}else if (isNaN($(obj).val())) {
// // 在当前元素的后面添加提示信息
$(obj).after('<apan style="color:red">必须为数字</span>')
// 用定时器清空提示
setTimeout(function(){
$(obj).next().remove()
},1000)
return false }else if ($(obj).val()<=0) {
// 在当前元素的后面添加提示信息
$(obj).after('<apan style="color:red">必须大于0</span>')
// 用定时器清空提示
setTimeout(function(){
$(obj).next().remove()
},1000)
return false
}
})
// 第二步：处理用户请求：ajax
if (flag==true) {
$.get('dome7.php',{
name:$('input[name="name"]').val(),
rows:$('input[name="rows"]').val(),
cols:$('input[name="cols"]').val() },function(data){
// $('p:last').after('<span>').text(data)
$('p:last').after(data)
// $('caption').after(data)
})
flag =false
}
})
//重置按钮
$('button:last').click(function(){
$('input:input').val('')
$('input:first').focus()
$('p:last').next().remove()
flag =true
})
</script>
</body>
</html>对应的php脚本：
<?php
//判断用户的请求类型是否合法,必须是GET请求
if ($_SERVER['REQUEST_METHOD'] == 'GET') {
//如果用户发送的数据全部存在且不为空
if (!empty($_GET['rows']) && !empty($_GET['cols']) && !empty($_GET['name'])) {
//用较短的变量名称进行转存
$name = $_GET['name'];
$rows = $_GET['rows'];
$cols = $_GET['cols'];
// 创建表格的基本结构
$table = '<table border="1px" cellspacing="0" cellpadding="3px" align="center" width="80%">';
// 生成表格名
$table .='<caption align="center" background-color="green" color="white">';
$table .=$name.'<br>'.'<br>';
$table .='</caption>';
// 生成 表格头
$table .= '<tr align="center" bgcolor="lightgreen">';
for ($i=0; $i<$cols; $i++) {
$table .= '<th>A</th>';
}
$table .= '</tr>';
// echo $table;
// //2.生成表格内容区
for ($r=0; $r<$rows; $r++) {
$table .= '<tr>';
for($c=0; $c<$cols; $c++) {
//设置单元格的数据,数据与单元格数量对应
$data = $r*$cols+$c;
// ++$data: 可以确保从1开始计数
$table .= '<td align="center">'.++$data.'</td>';
}
$table .= '</tr>';
}
$table .= '</table>';
//将生成的表格返回到客户端
// echo $table;
print_r($table);
// 结束当前脚本
exit();
}
}else {
exit('<span style="color:red">非法请求</span>');
}实战:表格自动生成器的实现效果：
总结：
通过这次实战案例的学习与完成，让我把基础又打牢了一些。之前在完成该案例的时候老是出不来效果，自己敲了两三遍都不行，跟着老师敲也出不来，最后静下心来一步一步的完成，每一步的对才过，最终才搞出来，得到的体会就是要细心加细心加细心才行。