收藏
批改状态：合格
老师批语：
表格生成器运用了$(选择器).each()循环遍历获取到所有jQuery对象，处理用户请求$.get()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 600px;
height: 700px;
margin: 50px auto;
background-color: #90BFFE;
text-align: center;
}
button {
width: 100px;
height: 40px;
margin-left: 10px;
/*line-height: 40px;*/
}
input {
width: 300px;
height: 40px;
margin: 10px auto;
}
</style>
</head>
<body>
<div>
<p>标题 <input type="text" name="title"></p>
<p>行 <input type="text" name="rows"></p>
<p>列 <input type="text" name="cols"></p>
<span><button>生成</button><button>重置</button></span>
</div>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript">
var flag = true
$('button:eq(0)').click(function(){
$(':input').not('button, :eq(0)').each(function(index,obj){
// if($(obj).length == 0)
if($(obj).val().length == 0){
$(obj).after('<span> 不能为空</span')
setTimeout(function(){
$(obj).next().remove()
},2000)
}else if(isNaN($(obj).val())){
$(obj).after('<span> 只能为数字</span')
setTimeout(function(){
$(obj).next().remove()
},2000)
}else if(($(obj).val()) <=0){
$(obj).after('<span> 不能小于0 </span')
setTimeout(function(){
$(obj).next().remove()
},2000)
}
})
if(flag = true){
$.get(
'data1.php',
{
title: $('i nput[name=title]').val(),
rows: $('input[name=rows]').val(),
cols: $('input[name=cols]').val()
}, function(msg){
$('span:last').next().remove()
$('span:last').after(msg)
flag = false
})
}
})
$('button:eq(1)').click(function(){
$('input').not('button').val('')
$('span:last').next().remove()
flag = true
})
</script>判断数据请求类型使用$_SERVER['REQUEST_METHOD'] ，for()循环输出表格
<?php
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="5" align=center width=85%>';
$table .= '<caption ><h1 style="color:red;font-weight:bolder">'.$title.'</h1></caption>';
$table .='<tr align=center bgcolor=skyblue>';
for ($i=0; $i < $cols; $i++) {
$table .= '<th> 用户'. ($i+1) .'</th>';
}
$table .='</tr>';
for ($a=0; $a <$rows ; $a++) {
$table .='<tr align=center bgcolor=white>';
for ($b=0; $b < $cols ; $b++) {
$sub = $a*$cols+$b;
$table .= '<td>' .++$sub. '</td>';
# code...
}
$table .='</tr>';
}
echo $table;
exit();
}
}else{
exit('请求错误');
}
?>代码执行效果图
总结：1，熟练掌握了$(选择器).each(对象索引，当前对象)使用，用来循环遍历获取所有jQuery对象。对于在再次使用$.get()有了更深入的了解。创建请求标志，防止重复请求有了初次认识。
2，判断用户的请求类型是否合法，使用$_SERVER['REQUEST_METHOD'] == 'GET'，判断用户如果用户发送的数据全部存在且不为空语句使用方式!empty($_GET['rows']) && !empty($_GET['cols'])
3，创建表格的基本架构,采用字符串拼接方式,最后统一生成,提高效率（使用 .= 操作符）
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
