收藏
批改状态：合格
老师批语：
下面代码则是来实现一个通过获取用户输入的行和列，来产生一个根据用户信息输入的行和列来定制的表格
以下是php代码
<?php
//判断用户的请求类型是否合法，必须是GET请求
if ($_SERVER['REQUEST_METHOD']== 'GET'){
if (!empty($_GET['rows']) && !empty($_GET['cols']))
$rows = $_GET['rows'];
$cols = $_GET['cols'];
//用短变量名称进行转存
$table = '<table border="1" cellspacing="0" cellpadding="3" align="center" width="80%">';
//创建表格的基本结构，采用字符串拼接方式，最后统一生成，提高效率
//下面用双重循环来生成这个表格
$table .= '<tr align="center" bgcolor="lightgreen">';
for ($i=0; $i<$$cols;$i++){
$table .= '<th>x</th>';
}
$table .= '</tr>';
for ($r=0; $r<$rows; $r++){
$table .= '<tr>';
for ($c=0; $c<$cols; $c++){
//设置单元格的数据，数据与单元格数量对应
$data = $r*$cols+$c;
$table .= '<td align="center">'.++$data.'</td>';
}
$table .= '</tr>';
}
$table .= '</table>';
echo $table;
exit();
}
}else{
exit('<span style="color:red">请求类型错误</span>');
}
?>点击 "运行实例" 按钮查看在线实例
下面是前端的html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>实战 表格生成器</title>
<style type="text/css">
H3{
color:red;
margin-left:40px;
}
button{
width:80px;
height:30px;
margin-left:30px;
border:none;
background-color:green;
color:white;
}
</style>
<script type=text/javascript src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
</body>
<H3>表格生成器</H3>
<p><label>输入行：<input type="text" name="rows"></label></p>
<p><label>输入列：<input type="text" name="cols"></label></p>
<p><button>生成表格</button><button>重置表格</button></p>
<script type="text/javascript">
//首先创建一个请求标志，防止重复生成;
var flag=true
$('button:first').on('click',function()
{
//遍历并验证用户输入的信息
}
)
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结
这个程序主要用到了jquery的dom操作以及php的循环来实现输出表格内容，是对之前所学基础知识的一次总结
拓展开来可以做根据后台数据返回量来决定前端表格绘制多少行多少列的一个动态表格
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
