还想到了一些可以完善的地方,例如第二次点击创建的时候出来一个双选框是否重新创建表格,但是现在还没办法做出来所以先就这样吧
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>");
}
