大家好
以下是我对表格自动生成器的练习,如有错误望大家指出
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格生成</title> <style type="text/css"> h3 { color: green; margin-left: 70px; } button { background-color: lightblue; border: none; color: white; margin-left: 20px; } button:hover{ background-color: blue; font-size: 1.05em; cursor: pointer; } </style> </head> <body> <h3>表格生成器</h3> <p>表格标题: <input type="text" name="title"></p> <p>输入行: <input type="text" name="rows"></p> <p>输入列: <input type="text" name="cols"></p> <p><button>生成表格</button><button>重置表格</button></p> </body> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> //创建请求标志,防止重复请求 var flag = true //第一个按钮添加点击事件 $('button:first').click(function(){ //第一步:遍历并验证用户的输入信息 //$(选择器).each(对象索引,当前对象):用来循环遍历获取到所有jquery对象 $(':input').not('button').not('input:first').each(function(index,obj){ //非空判断 if ($(obj).val().length == 0) { $(obj).after('<span style="color:red">不能为空</span>') 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 //零值判断 } 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( //url地址 'demo.php', // 发送的请求参数 { rows:$('input[name="rows"]').val(), cols:$('input[name="cols"]').val(), title:$('input[name="title"]').val() }, // 请求成功的回调函数 function(data){ //先将上一次生成的表格删除 $('p:last').next().remove() //生成新的表格 $('p:last').after(data) //将请求标志设置为false,禁止重复请求 flag = false } ) } }) //给重置按钮添加点击事件 $('button').eq(1).click(function(){ //将行与列数据全部清空 $(':input').not('button').val('') //将输入焦点重置到行文本框上 $('input:first').focus() //将上一次请求生成的表格删除 $('p:last').next().remove() //重置请求状态为true:允许用户请求 flag = true }) </script> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<?php //判断用户的请求类型是否是GET请求 if ($_SERVER['REQUEST_METHOD'] =='GET'){ //如果用户发送的数据全部存在且不为空 if (!empty($_GET['rows']) && !empty($_GET['cols'])) { //用较短的变量名称进行转存 $rows = $_GET['rows']; $cols = $_GET['cols']; $title = $_GET['title']; //创建表格的基本架构,采用字符串拼接方式,最后统一生成 $table = '<table border = "1" cellspacing = "0" cellpadding="3" width = "70%" align = "center">'; $table .= '<caption style="font-size:30px">'.$title.'</caption>'; //生成表头 $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; // ++$data: 可以确保从1开始计数 $table .= '<td align="center">'.++$data.'</td>'; } $table .= '</tr>'; } $table .= '</table>'; //将生成的表格返回到客户端 echo $table; //结束当前脚本,可以省略 exit(); } } else { exit('<span style="color:red">请求类型错误</span>'); }
运行实例 »
点击 "运行实例" 按钮查看在线实例
课程总结
1.遍历 each 的用法—$(选择器).each(对象索引,当前对象):用来循环遍历获取到所有jquery对象
2.创建请求标志,防止重复请求的用法
3.怎么判断用户的请求类型—$_SERVER['REQUEST_METHOD'] == ‘GET’
4.设置单元格的数据,数据与单元格数量对应的公式—$data = $r*$cols+$c;