实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格生成器</title>
<style type="text/css">
h3{
color: green;
margin-left: 40px;
}
button{
width: 80px;
height: 30px;
border: none;
background-color: green;
color: white;
margin-left: 30px;
}
</style>
</head>
<body>
<h3>表格生成器</h3>
<p><label>输入行:<input type="text" name="rows"></label></p>
<p><label>输入列:<input type="text" name="cols"></label></p>
<p><button>生成表格</button><button>重置行列</button></p>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
// 停止重复请求
var flag = true
$('button:first').on('click',function(){
$(':input').not('button').each(function(index,obj){
if ($(obj).val().length == 0){
$(obj).after('<span style="color:red">不能为空</span>')
setTimeout(function(){
$(obj).next().remove()
},2000)
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">必须大于零</span>')
setTimeout(function(){
$(obj).next().remove()
},2000)
return false
}
//处理用户请求
if(flag == true){
$.get('check.php',{
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>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
PHP:
实例
<?php
if($_SERVER['REQUEST_METHOD'] == 'GET'){
if(!empty($_GET['rows']) && !empty($_GET['cols'])) {
$rows = $_GET['rows'];
$cols = $_GET['cols'];
$table = '<table border="1" cellpadding="3" align="center" width="80%">';
//生成表头
$table .= '<tr align="center" bgcolor="lightgreen">';
for ($i=0; $i<$cols; $i++){
$table .= '<th> a </th>';
}
$table .='</tr>';
echo $table;
//生成表格内容器
for ($r=0; $r<$rows; $r++){
$table .= '<tr>';
for ($c=0; $c<$cols; $c++) {
$data = $r*$cols+$c;
$table .='<td align="center">x</td>';
}
$table .='</tr>';
}
$table .='</table>';
echo $table;
}
}else{
exit('<span style="color:red">非法请求</span>');
}运行实例 »
点击 "运行实例" 按钮查看在线实例
