<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格生成器</title> <style type="text/css"> h3 { color: green; margin-left:40px; } button { width: 80px; height: 30px; border: none; background-color: green; color:white; margin-right: 30px; } </style> </head> <body> <h3>表格生成器</h3> <p><label>输入行:<input type="text" name="rows" id="tRow"></label></p> <p><label>输入列:<input type="text" name="cols" id="tCol"></label></p> <p><button>生成表格</button><button>重置行列</button></p> <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').on('click',function(){ $(':input').not('button').each(function(index,obj){ if ($(obj).val().length == 0) { $(obj).after('<span style="color:red">不能为空!</span>') setTimeout(function(){$(obj).next().remove()},2000) return false } if (isNaN($(obj).val())) { $(obj).after('<span style="color:red">必须是数字!</span>') setTimeout(function(){$(obj).next().remove()},2000) return false } if ($(obj).val() <= 0 ) { $(obj).after('<span style="color:red">必须大于0!</span>') setTimeout(function(){$(obj).next().remove()},2000) return false } }) $.get( // 1.处理的脚本 'svr0413.php', { // rows: $('input[name="rows"]').val(), // cols: $('input[name="cols"]').val() rows: $('#tRow').val(), cols: $('#tCol').val() }, function(data){ // alert('hello') $('p:last').next().remove() $('p:last').after(data) }) }) //第二点:处理用户的请求(Ajax实现) // if (flag == true) { // if (flag >= 0) { // alert('hello') // $.get( // //1.请求处理的脚本 // 'svr0413.php', // //2.发送的请求参数 // { // rows: $('input[name="rows"]').val(), // cols: $('input[name="cols"]').val() // }, // //3.请求成功的回调函数 // function(data){ // //先将上一次生成的表格删除 // $('p:last').next().remove() // //生成新的表格 // $('p:last').after(data) // //将请求标志设置为false,禁止重复请求 // flag = false // }) // } $('button').eq(1).click(function(){ $('input:text').val('') $('#tRow').focus() $('p:last').next().remove() // flag = true }) </script> </body> </html>
点击 "运行实例" 按钮查看在线实例
<?php 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%">'; //0.表格标题 $table .= '<caption><h3 style="color:red">表格标题</h3></caption>'; //1生成表头 $table .= '<tr align="center" bgcolor="lightgreen">'; for ($i=0; $i < $cols; $i++) { $tmp = $i + 1; $table .= '<th>title'.$tmp.'</th>'; } $table .= '</tr>'; //2.增加内容 for ($i=0; $i < $rows; $i++) { if ($i%2 == 1) { $table .= '<tr bgcolor="skyblue">'; } else { $table .= '<tr>'; } for ($j=0; $j < $cols; $j++) { $no = $i * $cols + $j; ++$no; $data = '单元格'; $data .= $no; $table .= '<td align="center">'.$data.'</td>'; } $table .= '</tr>'; } $table .= '</table>'; //将生成的表格返回到客户端 echo $table; } } else { exit('<span style="color:red">请求类型错误!</span>'); } ?>
点击 "运行实例" 按钮查看在线实例