还想到了一些可以完善的地方,例如第二次点击创建的时候出来一个双选框是否重新创建表格,但是现在还没办法做出来所以先就这样吧
index.php
实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格生成器</title> </head> <body> <table> <tr> <td> 输入行:<input type="text" class="input" id="rows" onfocus="value=''" onblur="Check();" oninput="if(value.length>2)value=value.slice(0,2)" value=""> </td> </tr> <tr> <td> 输入列:<input type="text" class="input" id="cols" onfocus="value=''" onblur="Check();" oninput="if(value.length>2)value=value.slice(0,2)" value=""> </td> </tr> <tr> <td > <input type="button" id="build" value="生成表格"> <input type="button" id="reset" value="重置表格"> </td> </tr> <!-- 一个隐藏的input做标志,不受作用域影响我觉得可能会好用点> <input type="hidden" id="flag" value="true"> </table> <script type="text/javascript" src="../jquery-3.3.1/jquery-3.3.1.min.js"></script> <!--测试用--> <!--<script type="text/javascript">--> <!-- var l = $('#rows').val()--> <!-- $('#build').on('click',function () {--> <!----> <!-- $('#rows').after('<span id="rtips">'+l+'</span>');--> <!-- alert(l);--> <!-- })--> <!----> <!-- $('#reset').on('click',function () {--> <!-- $('#rtips').remove()--> <!-- })--> <!----> <!--</script>--> <script> // 遍历判断两个输入框 function Check() { $('.input').each(function (index,obj) { //获得焦点以后文本变成黑色 $(obj).on('focus',function () { $(obj).css('color','black') }) //非空判断,如果为空在文本框里面输入红色提示 if($(obj).val().length == 0){ $(obj).val('输入').css('color','red') $('#flag').val('false') //非数字判断,如果不是数字在文本框里面输入红色提示 }else if(isNaN($(obj).val())){ $(obj).val('输入数字').css('color','red') $('#flag').val('false') //0值判断 }else if($(obj).val() <= 0){ $(obj).val('输入大于等于0的数字').css('color','red') $('#flag').val('false') return false }else { $('#flag').val('true') } }) } //点击生成表格按钮事件 $('#build').on('click',function () { Check() if($('#flag').val() == 'true'){ $.get( 'tableBuild.php', { rows:$('input[id="rows"]').val(), cols:$('input[id="cols"]').val() }, function (data) { //删除之前的表格 $('#newTable').remove() //创建表格 $('#reset').after(data) //更改标志位的值 $('#flag').val('false') } ) } }) //点击重置表格按钮事件 $('#reset').on('click',function () { //清空输入框 $('.input').val('') //焦点到输入框 $('#rows').focus() //删除之前的表格 $('#newTable').remove() //更改标志位的值 $('#flag').val('true') }) </script> </body> </html> 运行实例 » 点击 "运行实例" 按钮查看在线实例
tableBuild
<?php
//判断用户的请求类型是否合法,必须是GET请求
if ($_SERVER['REQUEST_METHOD'] == 'GET') {
//如果用户发送的数据全部存在且不为空
if (!empty($_GET['rows']) && !empty($_GET['cols'])) {
//用较短的变量名称进行转存
$rows = $_GET['rows'];
$cols = $_GET['cols'];
//用变量table存储要输出的语句
$table = '<table id="newTable" border="1">';
//生成表格内容区
for ($r=0; $r<$rows; $r++) {
$table .= '<tr>';
for($c=0; $c<$cols; $c++) {
//每个单元格都是一个文本框
$table .= '<td align="center" ><input type="text" style="border:none" ></td>';
}
$table .= '</tr>';
}
$table .= '</table>';
//返回要输出的语句table
echo $table;
//结束当前脚本
exit();
}
} else {
exit("<span>请重试</span>");
}