收藏
批改狀態(tài)：未批改
老師批語：
前面一段時間跟著老師學(xué)習(xí)了html，Jquery，現(xiàn)在又認識了php。我們今天就結(jié)合這3個做一個簡單的表格生成工具！
在Jquery中，用到了新的函數(shù)each() :為每個匹配元素規(guī)定要運行的函數(shù).
php中，用到了循環(huán)語句for() : 指定循環(huán)其中的代碼多少次。
效果如下：
html代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格生產(chǎn)</title>
<style type="text/css">
.all{
width: 100%;
background-color: #DCDDDF;
}
.main{
background-color: #00AEEF;
box-shadow: 3px 3px 5px #777777;
margin: auto;
}
.main p,h2{
text-align: center;
line-height: 35px;
}
.main p input{
border: none;
width: 150px;
height: 30px;
border-radius: 2px;
text-align: center;
background-color: #F9F9F9;
}
.main button{
width: 100px;
height: 30px;
border: none;
background-color: coral;
color: #fff;
margin-bottom: 10px;
}
.main button:hover{
background-color: #ED1C24;
font-size: 1.2em;
}
.table{
margin: auto;
text-align: center;
}
</style>
</head>
<body>
<div class="all">
<div class="main">
<h2>表格生成器</h2>
<p>
標(biāo)題：<input type="text" name="cap" id="cap" value="" placeholder="請輸入標(biāo)題"/>
</p>
<p>
行數(shù)：<input type="text" name="rows" id="rows" value="" placeholder="請輸入行數(shù)"/>
</p>
<p>
列數(shù)：<input type="text" name="cols" id="cols" value="" placeholder="請輸入列數(shù)"/>
</p>
<p>
<button id='make'>生成</button> <button id='reset'>重置</button>
</p>
</div>
<div class="table">
</div>
</div>
</body>
</html>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript">
var flag = true
$('#make').click(function(){
$(':input').not('button').not('#cap').each(function(index,obj){
if ($('#cap').val().length==0) {
$('#cap').after('<span>不得為空</span>')
setTimeout(function () {
$('#cap').next().remove()
$('#cap').focus()
},1500)
return false
}
if ($(obj).val().length==0) {
$(obj).after('<span>不得為空</span>')
setTimeout(function () {
$(obj).next().remove()
$(obj).val('')
$(obj).focus()
},1500)
return false
}else if (isNaN($(obj).val())) {
$(obj).after('<span>數(shù)字必須是整數(shù)</span>')
setTimeout(function () {
$(obj).next().remove()
$(obj).val('')
$(obj).focus()
},1500)
return false
}else if ($(obj).val()<=0) {
$(obj).after('<span>數(shù)字必須大于0</span>')
setTimeout(function () {
$(obj).next().remove()
$(obj).val('')
$(obj).focus()
},1500)
return false
}
})
if (flag=true) {
$.ajax({
type:"get",
url:"demo1.php",
async:true,
data:{
'caption':$('#cap').val(),
'rows':$('#rows').val(),
'cols':$('#cols').val()
},
success:function(res){
$('.table').append(res)
}
});
}
flag = false
})
$('#reset').click(function(){
$('#cap').val('').focus()
$('#cols').val('')
$('#rows').val('')
flag = true
})
</script>點擊 "運行實例" 按鈕查看在線實例
php代碼：
<?php
if($_SERVER['REQUEST_METHOD'] == 'GET'){
if(!empty($_GET['caption']) && !empty($_GET['rows']) && !empty($_GET['cols'])){
$cap = $_GET['caption'];
$rows = $_GET['rows'];
$cols = $_GET['cols'];
$data = '<table cellspacing="0" cellpadding="5" border="1" width="80%" style="margin:auto" >';
$data .= '<caption style="color:red;font-size:1.5em;font-weight:bold;margin-bottom:10px;font-family:微軟雅黑">'.$cap.'</caption>';
$data .= '<tr>';
//生成th表頭部分
for($t=0;$t<$cols;$t++){
if($t==0){
$data .= '<th>ID</th>';
}else if($t==1){
$data .= '<th>姓名</th>';
}else if($t==2){
$data .= '<th>手機</th>';
}else{
$data .= '<th>第'.$t.'列</th>';
}
}
//生成表格內(nèi)容區(qū)域部分
$data .= '</th>';
for($i=0;$i<$rows;$i++){
$data .= '<tr>';
for($a=0;$a<$cols;$a++){
if($a==0){
$data .= '<td>'.($i+1).'</td>';
}else{
$data .= '<td>內(nèi)容</td>';
}
}
$data.='</tr>';
}
$data .= '</table>';
echo $data;
}
}點擊 "運行實例" 按鈕查看在線實例
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號