代码:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格生成器</title> <style type="text/css"> h2 { color: green; margin-left:80px; } button { width: 80px; height: 30px; border: none; background-color: green; color:white; margin-left: 60px; } button:hover { cursor: pointer; background-color: coral; } </style> </head> <body> <h2>表格生成器</h2> <p><label for="title">请输入表格的标题:</label><input type="text" name="title" id="title" placeholder="选填"></p> <p><label for="rows">请输入表格的行数:</label><input type="text" name="rows" id="rows" placeholder="必填"></p> <p><label for="cols">请输入表格的列数:</label><input type="text" name="cols" id="cols" placeholder="必填"></p> <p><button id="submit">生成</button> <button id="reset">删除</button></p> </body> </html> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $("#submit").click(function(){ $("input:gt(0)").each(function(){ $(this).next().remove(); if( $(this).val().length == 0){ $(this).after("<span style='color:red;'>数据不能为空</span>"); $(this).focus() ; return false ; }else if( $(this).val() == 0 ){ $(this).after("<span style='color:red;'>数据必大于0</span>"); $(this).focus() ; return false ; }else if( isNaN($(this).val()) ){ $(this).after("<span style='color:red;'>数据必须是数字</span>"); $(this).focus() ; return false ; } }) $.get( "tableShow.php", //url { title:$('input[name = "title"]').val(), rows:$('input[name = "rows"]').val(), cols:$('input[name = "cols"]').val() }, //data function(data){ //先将上一次生成的表格删除 $('p:last').next().remove() //生成新的表格 $('p:last').after(data) } //sussess ) }) $("#reset").click(function(){ $("#submit").not('button').val('') ; $("#submit").focus() ; $("p:last").next().remove() ; }) </script>
运行实例 »
点击 "运行实例" 按钮查看在线实例
PHP:
实例
<?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="3" align="center" width="80%">'; $table .= '<caption style="font-weight:bold; line-height: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; $table .= '<td align="center">'.++$data.'</td>'; } $table .= '</tr>'; } $table .= '</table>'; echo $table; exit(); } } else { exit('<span style="color:red">请求类型错误</span>'); } ?>
运行实例 »
点击 "运行实例" 按钮查看在线实例