先來幾張效果圖
主頁面分頁顯示：
關鍵字查詢，關鍵字描紅
添加數組，彈出窗口，點擊保存，再不刷新頁面的同時添加到網頁數據
修改界面：彈出窗口，文本框中保留點擊的車輛的原始信息
主頁面代碼
<meta charset="UTF-8" /> <title>Document</title> <script src="../gongju/bootstrap-3.3.7-dist/js/jquery-1.11.2.min.js" type="text/javascript"></script> <script src="../gongju/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript"></script> <script src="biao.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="../gongju/bootstrap-3.3.7-dist/css/bootstrap.min.css"/> <style type="text/css"> .odd{background-color:#AFD9EE;} .even{background-color:#C1E2B3;} </style> </head> <body> <div style=" float:left;border: 1px solid #1B6D85;width: 20%;"><button>查詢</button><input id="chaxun" type="text" style="border: 0px; outline: none;"></div> <div style="float: left;margin-left: 30px;"><button style="width: 100px;" id="tianjia" data-toggle="modal" data-target="#myModal2">添加數據</button></div> <table border="1" cellspacing="1" cellpadding="1" width="100%"> <tr><th>型號</th><th>車名</th><th>生產日期</th><th>油耗</th><th>動力</th><th>排量</th><th>價格</th><th>操作</th></tr> <tbody id="neirong"></tbody> </table> <center> <ul class="pagination fenye"> </ul> </center> <!-------------------------------bootstrap彈窗--修改數據框----------------------------------------------------> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">修改界面</h4> </div> <div class="modal-body" id="xiugaijiemian"> <!--彈窗主題內容--> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary" id="baocun">保存</button> </div> </div> </div> </div> <!--------------------------bootstrap彈框--添加框------------------------------------------------------------> <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">添加界面</h4> </div> <div class="modal-body" id="tianjiajiemian"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary tianjiabaocun">保存</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> </body> </html>
js代碼：
$(document).ready(function(){ page = 1; jiazai(); LoadXinXi(); $("#chaxun").keyup(function(){ /*這個事件要放到document里邊*/ jiazai(); LoadXinXi(); }) }) function jiazai() { var aa=$("#chaxun").val(); $.ajax({ type:"post", url:"chuli.php", async:false, data:{aa:aa,page:page}, dataType:"text", success:function(data) { var str=""; var hang=data.split("|"); for(var i=0;i<hang.length;i++) { var lie=hang[i].split("^"); var bb=lie[2]; /* 取brand表中的類型名,把輸出的數據改掉----------*/ $.ajax({ type:"post", url:"chuli1.php", async:false, data:{bb:bb}, dataType:"text", success:function(d){ bb=d; } }); /*--------------------------------*/ str+="<tr><td>"+lie[1]+"</td><td>"+bb+"</td><td>"+lie[3]+"</td><td>"+lie[4]+"</td><td>"+lie[5]+"</td><td>"+lie[6]+"</td><td>"+lie[7]+"</td><td><button class='shanchu' bs='"+lie[0]+"'>刪除</button> <button class='xiugai' data-toggle='modal' data-target='#myModal' xg='"+lie[0]+"'>修改</button></td></tr>"; /*給刪除按鈕添加一個bs屬性,用來下邊點擊是獲取*/ } $("#neirong").html(str); /*換行變色處理------------------*/ $("tr:even").addClass("even"); $("tr:odd").addClass("odd"); /*----------------------------*/ /*----添加數據------------------------------------------------------------------------*/ $("#tianjia").click(function(){ var jiastr="型號：<input type='text' id='xinghao1'><br><br>車名：<input type='text' id='cheming1'><br><br>生產日期：<input type='text' id='riqi1'><br><br>油耗：<input type='text' id='youhao1'><br><br>動力：<input type='text' id='dongli1'><br><br>排量：<input type='text' id='pailiang1'><br><br>價格：<input type='text' id='jiage1'>"; $("#tianjiajiemian").html(jiastr); $(".tianjiabaocun").click(function(){ var xinghao1=$("#xinghao1").val(); var cheming1=$("#cheming1").val(); var riqi1=$("#riqi1").val(); var youhao1=$("#youhao1").val(); var dongli1=$("#dongli1").val(); var pailiang1=$("#pailiang1").val(); var jiage1=$("#jiage1").val(); $.ajax({ type:"post", url:"tianjia.php", async:false, data:{xinghao1:xinghao1,cheming1:cheming1,riqi1:riqi1,youhao1:youhao1,dongli1:dongli1,pailiang1:pailiang1,jiage1:jiage1}, dataType:"text", success:function(ddd) { if(ddd=="111") { jiazai(); }else { alert("添加失敗"); } } }) }) }) /*----------------------------------------------------------------------------------*/ /*刪除處理---------------------------------------------------------------------------------*/ $(".shanchu").click(function(){ var bs=$(this).attr("bs"); if(confirm("確定刪除么")){ /* 彈出確定刪除框,確定刪除,取消不刪除*/ $.ajax({ type:"post", url:"shanchu.php", async:true, data:{bs:bs}, dataType:"text", success:function(da) { if(da=="ok") { jiazai(); } else { alert("刪除失敗"); } } }) } }) /*-----------------------刪除處理結束-----------------------------------*/ /*修改----------------------------------------------------------------------------*/ $(".xiugai").click(function(){ var xg=$(this).attr("xg"); var str1=""; $.ajax({ type:"post", url:"xiugai.php", async:false, data:{xg:xg}, dataType:"text", success:function(xiugai) { lie=xiugai.split("^"); var bb=lie[2]; $.ajax({ type:"post", url:"chuli1.php", async:false, data:{bb:bb}, dataType:"text", success:function(d){ bb=d; } }) /* 設置一個隱藏的文本,用來保存code值,以便下邊取到*/ str1="<input type='hidden' id='canshu' value='"+lie[0]+"'>型號：<input type='text' id='xinghao' value='"+lie[1]+"'><br><br>車名：<input type='text' id='cheming' value='"+bb+"'><br><br>生產日期：<input type='text' id='riqi' value='"+lie[3]+"'><br><br>油耗：<input type='text' id='youhao' value='"+lie[4]+"'><br><br>動力：<input type='text' id='dongli' value='"+lie[5]+"'><br><br>排量：<input type='text' id='pailiang' value='"+lie[6]+"'><br><br>價格：<input type='text' id='jiage' value='"+lie[7]+"'>"; $("#xiugaijiemian").html(str1); /*給彈出框添加文本框*/ $("#baocun").click(function(){ var code=$("#canshu").val(); var xinghao=$("#xinghao").val(); var cheming=$("#cheming").val(); var riqi=$("#riqi").val(); var youhao=$("#youhao").val(); var dongli=$("#dongli").val(); var pailiang=$("#pailiang").val(); var jiage=$("#jiage").val(); $.ajax({ type:"post", url:"xiugaihou.php", async:true, data:{code:code,xinghao:xinghao,cheming:cheming,riqi:riqi,youhao:youhao,dongli:dongli,pailiang:pailiang,jiage:jiage}, dataType:"text", success:function(dd) { if(dd=="111") { jiazai(); }else { alert("修改失敗"); } } }) }) } }) }) /*------------------------修改救贖---------------------------------------------------------------*/ } }) }; /*------------------------------------------------*/ function LoadXinXi() { var str = ""; var minys = 1; var maxys = 1; var aa=$("#chaxun").val(); //查總頁數 $.ajax({ async:false, url:"zongshu.php", data:{aa:aa}, type:"POST", dataType:"TEXT", success: function(d){ maxys = d; } }); str += "<li><a>總共："+maxys+"頁</a></li> "; str += "<li id='prev'><a>上一頁</a></li>"; for(var i=page-2;i<page+3;i++) { if(i>=minys && i<=maxys) { if(i==page) { str += "<li class='dangqian' bs='"+i+"'><a>"+i+"</a></li> "; } else { str += "<li class='list' bs='"+i+"'><a>"+i+"</a></li> "; } } } str += "<li id='next'><a>下一頁</a></li>"; $(".fenye").html(str); //給上一頁添加點擊事件 $("#prev").click(function(){ page = page-1; if(page<1) { page=1; } jiazai(); //加載數據 LoadXinXi(); //加載分頁信息 }) //給下一頁加點擊事件 $("#next").click(function(){ page = page+1; if(page>maxys) { page=maxys; } jiazai(); //加載數據 LoadXinXi(); //加載分頁信息 }) //給中間的列表加事件 $(".list").click(function(){ page = parseInt($(this).attr("bs")); jiazai(); //加載數據 LoadXinXi(); //加載分頁信息 }) }
幾個處理頁面代碼
1.關鍵字查詢和分頁 chuli.php
<?php include("DBDA.class.php"); $db=new DBDA(); $aa=$_POST["aa"]; $page = $_POST["page"]; $num = 10; $tiao = ($page-1)*$num; $tj=""; if(!empty($aa)) { $tj=" name like '%{$aa}%' "; }else { $tj=" 1=1 "; } $sql="select * from car where ".$tj." limit {$tiao},{$num}"; $attr=$db->StrQuery($sql); $attr1=str_replace($aa, "<span style='color:red'>{$aa}</span>", $attr); echo $attr1; ?>
2.計算數據總條數 zongshu.php
<?php include("DBDA.class.php"); $db = new DBDA(); $aa = $_POST["aa"]; $num = 10; $sql = "select count(*) from car where name like '%{$aa}%'"; $zts = $db->StrQuery($sql); echo ceil($zts/$num); ?>
3.把汽車表中的brand行改名字 chuli1.php
<?php include("DBDA.class.php"); $db=new DBDA(); $bb=$_POST["bb"]; $sql="select brand_name from brand where brand_code='{$bb}'"; $atr=$db->StrQuery($sql); echo $atr; ?>
3.刪除處理頁面 shanchu.php
<?php include("DBDA.class.php"); $db=new DBDA(); $bs=$_POST["bs"]; $sql="delete from car where code='{$bs}'"; if($db->query($sql,0)) { echo "ok"; }else { echo "no"; } ?>
4.添加處理界面 tianjia.php
<?php include("DBDA.class.php"); $db=new DBDA(); $xinghao=$_POST["xinghao1"]; $cheming=$_POST["cheming1"]; $riqi=$_POST["riqi1"]; $youhao=$_POST["youhao1"]; $dongli=$_POST["dongli1"]; $pailiang=$_POST["pailiang1"]; $jiage=$_POST["jiage1"]; $sql="insert into car values('b001','{$xinghao}','{$cheming}','{$riqi}','{$youhao}','{$dongli}','{$pailiang}','{$jiage}','');"; if($db->Query($sql,0)) { echo "111"; }else { echo "222"; } ?>
5.修改前給彈出框中文本框添加原始內容 xiugai.php
<?php include("DBDA.class.php"); $db=new DBDA(); $xg=$_POST["xg"]; $sql="select * from car where code='{$xg}'"; echo $db->StrQuery($sql); ?>
6.修改后處理頁面 xiugaihou.php
<?php $code=$_POST["code"]; $xinghao=$_POST["xinghao"]; $cheming=$_POST["cheming"]; $riqi=$_POST["riqi"]; $youhao=$_POST["youhao"]; $dongli=$_POST["dongli"]; $pailiang=$_POST["pailiang"]; $jiage=$_POST["jiage"]; include("DBDA.class.php"); $db=new DBDA(); $sql="update car set name='{$xinghao}',brand='{$cheming}',time='{$riqi}',oil='{$youhao}',powers='{$dongli}',exhaust='{$pailiang}',price='{$jiage}' where code='{$code}'"; if($db->query($sql,0)) { echo "111"; }else { echo "222"; } ?>