Collection
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!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-right: 30px;
}
</style>
</head>
<body>
<h3>表格生成器</h3>
<p><label>输入行:<input type="text" name="rows" id="tRow"></label></p>
<p><label>输入列:<input type="text" name="cols" id="tCol"></label></p>
<p><button>生成表格</button><button>重置行列</button></p>
<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
$('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
}
if (isNaN($(obj).val())) {
$(obj).after('<span style="color:red">必须是数字！</span>')
setTimeout(function(){$(obj).next().remove()},2000)
return false
}
if ($(obj).val() <= 0 ) {
$(obj).after('<span style="color:red">必须大于0！</span>')
setTimeout(function(){$(obj).next().remove()},2000)
return false
}
})
$.get(
// 1.处理的脚本
'svr0413.php',
{
// rows: $('input[name="rows"]').val(),
// cols: $('input[name="cols"]').val()
rows: $('#tRow').val(),
cols: $('#tCol').val()
},
function(data){
// alert('hello')
$('p:last').next().remove()
$('p:last').after(data)
})
})
//第二点:处理用户的请求(Ajax实现)
// if (flag == true) {
// if (flag >= 0) {
// alert('hello')
// $.get(
// //1.请求处理的脚本
// 'svr0413.php',
// //2.发送的请求参数
// {
// rows: $('input[name="rows"]').val(),
// cols: $('input[name="cols"]').val()
// },
// //3.请求成功的回调函数
// function(data){
// //先将上一次生成的表格删除
// $('p:last').next().remove()
// //生成新的表格
// $('p:last').after(data)
// //将请求标志设置为false,禁止重复请求
// flag = false
// })
// }
$('button').eq(1).click(function(){
$('input:text').val('')
$('#tRow').focus()
$('p:last').next().remove()
// flag = true
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<?php
if ($_SERVER['REQUEST_METHOD'] == 'GET') {
if (!empty($_GET['rows']) && !empty($_GET['cols'])) {
$rows = $_GET['rows'];
$cols = $_GET['cols'];
$table = '<table border="1" cellspacing="0" cellpadding="3" align="center" width="80%">';
//0.表格标题
$table .= '<caption><h3 style="color:red">表格标题</h3></caption>';
//1生成表头
$table .= '<tr align="center" bgcolor="lightgreen">';
for ($i=0; $i < $cols; $i++) {
$tmp = $i + 1;
$table .= '<th>title'.$tmp.'</th>';
}
$table .= '</tr>';
//2.增加内容
for ($i=0; $i < $rows; $i++) {
if ($i%2 == 1) {
$table .= '<tr bgcolor="skyblue">';
}
else {
$table .= '<tr>';
}
for ($j=0; $j < $cols; $j++) {
$no = $i * $cols + $j;
++$no;
$data = '单元格';
$data .= $no;
$table .= '<td align="center">'.$data.'</td>';
}
$table .= '</tr>';
}
$table .= '</table>';
//将生成的表格返回到客户端
echo $table;
}
} else {
exit('<span style="color:red">请求类型错误！</span>');
}
?>点击 "运行实例" 按钮查看在线实例
