实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格自动生成器</title>
<style type="text/css">
.box {
width: 300px;
height: 245px;
background-color: #fefefe;
border: 1px solid grey;
margin:20px auto;
text-align: center;
color: #636363;
box-shadow: 2px 2px 2px #999;
border-radius: 10px;
}
.box button{
width: 100px;
height: 25px;
border: none;
font-size: 13px;
background:#048f74;
color: #f8f8f8;
cursor: pointer;
margin: 8px;
border-radius: 5px;
}
.box button:hover {
background-color: coral;
}
table {
margin-top: 30px;
padding: 0;
width: 100%;
box-shadow: 2px 2px 2px #999;
}
h3{
text-align: center;
margin:5px;
padding: 0;
font-size: 20px;
}
</style>
</head>
<body>
<div class="box">
<h2>表格自动生成器</h2>
<p><label >标题：<input type="text" name="title"></label></p>
<p><label >行数：<input type="text" name="rows"></label></p>
<p><label >列数：<input type="text" name="cols"></label></p>
<p><button>生成表格</button><button>重置表格</button></p>
</div>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
var flag = true
var tTitle = $('input').eq(0).val()
var rRows = $('input').eq(1).val()
var cCols = $('input').eq(2).val()
$('button').eq(0).click(function(){
$(':input').not('button').each(function(index,obj){
if (rRows.length == 0) {
$(rRows).after('<span style="color:red">不能为空</span>')
setTimeout(function(){
$(obj).next().remove()
},1000)
return false
} else if (isNaN($(obj).val())) {
$(obj).after('<span style="color:red">必须是数字</span>')
setTimeout(function(){
$(obj).next().remove()
},2000)
return false
} else if ($(obj).val() <= 0) {
$(obj).after('<span style="color:red">必须大于0</span>')
setTimeout(function(){
$(obj).next().remove()
},2000)
return false
}
})
if (flag == true) {
$.get(
'0414-1.php',
{
title:$('input[name="title"]').val(),
rows: $('input[name="rows"]').val(),
cols: $('input[name="cols"]').val()
},
function(data){
$('p:last').next().remove()
$('p:last').after(data)
flag = false
})
}
})
$('button').eq(1).click(function(){
$(':input').not('button').val('')
$(':input:first').focus()
$('p:last').next().remove()
flag = true
})
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<?php
if ($_SERVER['REQUEST_METHOD']== 'GET') {
if (!empty($_GET['rows']) && (!empty($_GET['cols']))&&(!empty($_GET['title']))){
$title = $_GET['title'];
$rows = $_GET['rows'];
$cols = $_GET['cols'];
$table = '<table border="1" cellspacing="0" cellpadding="5" align="center" width="100%" >';
$table .= "<caption> <h3> {$title} </h3> <caption><tr>";
$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>');
}运行实例 »
点击 "运行实例" 按钮查看在线实例
