<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<meta charset="UTF-8">
<title>表格生成器</title>
<style type="text/css">
.box button{
width: 90px;
height: 30px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="box">
<p>表格标题: <input type="text" id="table_title" placeholder="表格标题"></p>
<p>表格行数: <input type="text" id="table_rows" placeholder="表格行数"></p>
<p>表格列数: <input type="text" id="table_cols" placeholder="表格列数"></p>
<p><button id="creat">生成表格</button> <button id="resert">重置表格</button></p>
</div>
</body>
<script type="text/javascript">
//添加点击方法
$('#creat').on('click',function () {
$(':input').not('input:first').not('button').each(function (index,obj) {
$(obj).next().remove();
if($(obj).val().length==0){//行数、列数不能为空
$(obj).after('<span style="color: red">不能为空</span>');
return;
}else{
if(isNaN($(obj).val())){//行数、列数值只能为数字
$(obj).after('<span style="color: red">只能为数字</span>');
return;
}else{
if($(obj).val()<=0){
$(obj).after('<span style="color: red">必须大于0</span>');
return;
}
}
}
});
$.get('index.php',{
rows:$('#table_rows').val(),
cols:$('#table_cols').val(),
title:$('#table_title').val(),
},function (data) {
$('p:last').next().remove();
$('p:last').after(data);
});
});
</script>
</html><?php
/**
* Created by PhpStorm.
* User: spdbcc
* Date: 2018/4/16
* Time: 上午9:27
*/
if($_SERVER['REQUEST_METHOD']=='GET'){
if(!empty($_GET['rows']) && !empty($_GET['cols'])){
$rows = $_GET['rows'];
$cols = $_GET['cols'];
$table = '<table cellspacing="0" cellpadding="2" align="center" border="1">';
if(!empty($_GET['title'])){
$table.="<caption>{$_GET['title']}</caption>";
}
for ($i=1;$i<$cols+1;$i++){
$table .="<th width='100px'>第{$i}列</th>";
}
for ($j=0;$j<$rows;$j++){
$table.='<tr>';
for($k=0;$k<$cols;$k++){
$data = $j*$cols+$k;
++$data;
$table.="<td>{$data}</td>";
}
$table.='</tr>';
}
echo $table;
}
}else{
echo '<span>非法请求</span>';
}
