实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自动生成表格器</title>
<style>
h3{
color: green;
}
button{
border: none;
background-color: green;
width: 80px;
height: 30px;
color: white;
margin-right: 40px;
border-radius: 5%;
}
.table_sty{
background-color: skyblue;
}
</style>
</head>
<body>
<h3>自动生成表格器</h3>
<p><label for="">输入标题：<input type="text" name="title"></label></p>
<p><label for="">输入行：<input type="text" name="rows"></label></p>
<p><label for="">输入列：<input type="text" name="cols"></label></p>
<p><button>生成表格</button><button>重置行列</button></p>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
var flag = true;
$('button:first').on('click',function () {
$(':input').not('button').each(function (index,obj) {
//注意返回的不是jQuery对象
if ($(obj).val().length == 0 ){
//在当前元素的后面添加提示信息 做的是添加操作
$(obj).after('<span style="color:red">插入的内容不能为空</span>')
setTimeout(function () {
// next()下一个同级元素 属于过滤器
$(obj).next().remove()
},2000)
return false
}
if (isNaN($(obj).val()) && index>0){
//在当前元素的后面添加提示信息
$(obj).after('<span style="color:red">必须为数字</span>')
setTimeout(function () {
$(obj).next().remove()
},2000)
return false
}
if ($(obj).val()<=0 && index>0){
//在当前元素的后面添加提示信息
$(obj).after('<span style="color:red">必须大于零</span>')
setTimeout(function () {
$(obj).next().remove()
},2000)
return false
}
})
//处理用户的请求 ajax
if (flag == true){
$.get(
//地址 URL
'tableCheck.php',
//提交的参数
{
rows:$('input[name="rows"]').val(),
cols:$('input[name="cols"]').val(),
title:$('input[name="title"]').val()
},
function (msg) {
console.log(msg);
$('p:last').next().remove()
// $('p:last').append(msg)
$('p:last').after(msg)
flag = false;
}
)
}
//重置按钮
$('button:last').click(function () {
$(':input:first').focus()
$(':input').not('button').val('')
$('p:last').next().remove()
flag = true
})
})
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<?php
/医院
* Created by PhpStorm.
* User: tiankang
* Date: 2018/4/16
* Time: 11:59
*/
if ($_SERVER['REQUEST_METHOD']=='GET'){
if (!empty($_GET['rows']) && !empty($_GET['cols']) && !empty($_GET['title'])){
// 预定义的 $_GET 变量用于收集来自 method="get" 的表单中的值。
// 从带有 GET 方法的表单发送的信息，对任何人都是可见的（会显示在浏览器的地址栏），并且对发送信息的量也有限制
// 表单域的名称会自动成为$_GET数组中的键
$rows = $_GET['rows'];
$cols = $_GET['cols'];
$title = $_GET['title'];
//创建表格的基本结构
$table = '<table border="1" cellspacing="0" cellpadding="1" align="left" width="200">';
$table .= '<caption style="color: #FF0000">'.$title.'</caption>';
//生成表头
$table .= '<tr align="center">';
for ($i=0;$i<$cols;$i++){
$table .= '<th bgcolor="green">'.$i.'</th>';
}
$table .= '</tr>';
for ($j=0;$j<$rows;$j++){
$table .= '<tr align="center">';
for ($k=0;$k<$cols;$k++){
$count = $j*$cols+$k;
$table .= '<td align="center" style="width:20px" >'.+$count.'</td>';
}
$table .= '</tr>';
}
//并置运算符 (.) 用于把两个字符串值连接起来 a .= b等同于a = a . b 连接两个字符串
$table .= '</table>';
echo $table;
exit();
}
}else{
exit('<span style="color: red">非法请求</span>>');
}运行实例 »
点击 "运行实例" 按钮查看在线实例
