作业：显示以下界面：

作业要求：

1.查看详细信息，以弹窗的形式显示，使用ajax
2.批量删除

一、主页面

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 <script  src="../../jquery-1.11.2.min.js"></script>

 <script src="tanchuang.js"></script>

 <style type="text/css">

 .xq{

     background-color:#0080FF;

     color:#FFF;

     }

 .xq:hover{

     cursor:pointer;

     background-color:#FF8000;

     }

 </style>

 <link href="tanchuang.css" rel="stylesheet" type="text/css" />

 </head>

 <body>

 <h1>汽车查询页面</h1>

 <div>

     请输入查询内容：<input type="text" id="name" />

     <input type="submit" value="查询" id="chaxun" />

 </div>

 <br />

 <table width="100%" border="1" cellpadding="0" cellspacing="0" id="xianshi">

 </table>

 </body>

 <script type="text/javascript">

 $(document).ready(function(e) {

     //显示页面

     ShowAll();

     //显示页面方法

     function ShowAll()

     {

             var name=$("#name").val();

             $.ajax({

                 async:false,

                 url:"chuli.php",

                 //想让所有ajax使用同一个处理页面，给ajax都设置data{type: }和type:"POST"

                 data:{name:name,type:0},

                 type:"POST",

                 dataType:"TEXT",

                 success: function(data)

                 {

                     var str="<tr><td>代号</td><td>名称</td><td>系列</td><td>油耗</td><td>功率</td><td>价格</td><td>操作</td></tr>";

                     var hang=data.split("|");

                     for(var i=0;i<hang.length;i++)

                     {

                         var lie=hang[i].split("^");    

                         str+="<tr>";

                         str+="<td><input type='checkbox' class='ck' value='"+lie[0]+"' />"+lie[0]+"</td><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td>"+lie[4]+"</td><td>"+lie[5]+"</td><td><span class='xq' bs='"+lie[0]+"'>查看详情</span></td>";

                         str+="</tr>";

                     }

                     str+="<tr><td colspan='7'><input type='checkbox' id='qx'>全选&nbsp;&nbsp;<input type='button' value='批量删除' id='sc'></td></tr>";

                     $("#xianshi").html(str);

                 }

             });    

         //输入查询内容，点击查询后显示的页面

         $("#chaxun").click(ShowAll);    

             //查看详情

     $(".xq").click(function(){

             var code=$(this).attr("bs");

             $.ajax({

                 url:"chuli.php",

                 data:{code:code,type:1},

                 type:"POST",

                 dataType:"TEXT",

                 success: function(data){

                     //根据code查出一条信息

                     var lie=data.split("^");

                     //拼接显示内容

                     var html="<div value='"+lie[0]+"'>名称： "+lie[1]+"</div>";

                     html+="<div value='"+lie[0]+"'>系列："+lie[2]+"</div>";

                     html+="<div value='"+lie[0]+"'>油耗："+lie[4]+"</div>";

                     html+="<div value='"+lie[0]+"'>功率："+lie[5]+"</div>";

                     html+="<div value='"+lie[0]+"'>价格："+lie[7]+"</div>";

                     var win=new Window({

                         width : 300, //宽度

                         height : 300, //高度

                         title : '详细信息', //标题

                         content : html, //内容

                         isMask : false, //是否遮罩

                         buttons : "", //按钮

                         isDrag:true,    

                     });

                 }

             });

     })

     //全选

     $("#qx").click(function(){

         //找到class为ck的元素

         var ck=$(".ck");

         //全选复选框的自身状态

         var qx=$(this)[0].checked;

         ck.prop("checked",qx);

     })

     //批量删除

     $("#sc").click(function(){

         //找到要删除的选项

         var ck=$(".ck");

         for(var i=0;i<ck.length;i++)

         {

             if(ck.eq(i).prop("checked"))

             {

                 var code=ck.eq(i).val();

                 $.ajax({

                 url:"chuli.php",

                 data:{code:code,type:2},

                 type:"POST",

                 dataType:"TEXT",

                 success: function(data){

                     if(data.trim()=="OK")

                     {

                         window.location.href="index.php";

                     }

                     else

                     {

                         alert("删除失败!");

                     }

                 }

                 });

             }

         }

     })

     }

 });

 </script>

 </html>

二、处理页面（所有的ajax处理都包含在一个处理页面）

 <?php

 include ("../../DBDA.class.php");

 $db=new DBDA();

 //所有ajax使用一个处理页面

 $type=$_POST["type"];

 switch($type)

 {

     case 0:

         $name=$_POST["name"];

         $sql="select code, name, brand, oil, powers, price from car where name like '%{$name}%'";

         echo $db->StrQuery($sql);

         break;

     case 1:

         $code=$_POST["code"];

         $sql="select * from car where code='{$code}'";

         echo $db->StrQuery($sql);

         break;

     case 2:

         $code=$_POST["code"];

         $sql="delete from car where code='{$code}'";

         $r=$db->StrQuery($sql,1);

         if($r)

         {

             echo "OK";

             }

         else

         {

             echo "NO";

             }

         break;

     default:

         echo "";

         break;

 }

作业：汽车查询--弹窗显示详情，批量删除 ajax做法(0521)的更多相关文章

  1. 作业：汽车查询--弹窗显示详情，批量删除 php做法(0521)

    作业:显示以下界面: 作业要求: 1.查看详细信息,以弹窗的形式显示,使用ajax2.批量删除 一.主页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

  2. AJAX实现弹窗显示详情，全选和批量删除

    以Nation表为例,将Nation表显示在页面上,每一行数据前面加上复选框,后面加上查看详情,点击以弹窗形式显示每一行的数据,并且在表格最后一行加上全选复选框,点击选中全部数据,后面跟一个批量删除按 ...

  3. think php 上下架修改+jq静态批量删除+ajax删除+全选

    视图代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...

  4. StackExchange.Redis加载Lua脚本进行模糊查询的批量删除和修改

    前言 使用StackExchange.Redis没有直接相关的方法进行模糊查询的批量删除和修改操作,虽然可以通过Scan相关的方法进行模糊查询,例如:HashScan("hashkey&qu ...

  5. 5月21 汽车查询及批量删除----php方法

    ---恢复内容开始--- 这个与之前不同是在php中实现了页面的查询,引用AJAX实现批量删除及弹窗的显示 作业要求: 页面显示数据代码: <!DOCTYPE html PUBLIC " ...

  6. ajax“显示弹窗详情”和“删除”功能练习

    1.查看详细信息,以弹窗的形式显示,使用ajax 2.批量删除 “查询”功能可以参考前面的文章,这里只讲解ajax“显示弹窗详情”和“删除”功能 第一:在body中的代码 <title>a ...

  7. php部分---对数据的多条件查询，批量删除

    1.给多条件查询,添加条件 <h1>新闻信息查看</h1> <?php $tiaojian1=" 1=1"; $tiaojian2=" 1= ...

  8. 11月10日下午 ajax做显示信息以后用ajax、Bootstrp做弹窗显示信息详情

    1.用ajax做弹窗显示信息详情 nation.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  9. JAVAEE——BOS物流项目04：学习计划、datagrid、分页查询、批量删除、修改功能

    1 学习计划 1.datagrid使用方法(重要) n 将静态HTML渲染为datagrid样式 n 发送ajax请求获取json数据创建datagrid n 使用easyUI提供的API创建data ...

随机推荐

  1. C语言编程的进制问题问题

    在我们的编译器,我用的是ADS   开发平台,现在RTC模块编程时,2410作为上位机,如下代码: n = rBCDDATE;if(n==1) time->day =0x31 ; 波斯历的日期与 ...

  2. Swift—final关键字-b

    在类的定义中使用final关键字声明类.属性.方法和下标.final声明的类不能被继承,final声明的属性.方法和下标不能被重写. 下面看一个示例: final class Person { //声 ...

  3. 转：redis windows下的环境搭建

    原文来自于:http://www.2cto.com/os/201204/125971.html   下载地址:https://github.com/dmajkic/redis/downloads 下载 ...

  4. Android调用第三方应用

    Intent intent=new Intent(); //包名 包名+类名(全路径) intent.setClassName("com.qn.app.store", " ...

  5. hdu&&poj搜索题题号

    搜索 hdu1067 哈希 hdu1401 双向搜索 hdu1430 哈希 hdu1667 跌搜+启发式函数 hdu1685 启发式搜索 hdu1813 启发式搜索 hdu1885 状态压缩搜索 hd ...

  6. css(二)

    重新排传智的首页!头部和左边的部分完成了! <!doctype html> <html lang="en"> <head> <meta c ...

  7. 项目开发中封装一个BarButtonItem类别-很实用

    Encapsulates a TabBarItem--封装一个BarButtonItem类 在我们程序的导航栏的左边或右边一般都会有这样的BarButtonItem,用来界面之间的跳转 如果我们有很多 ...

  8. iOS中XMPP简单聊天实现 好友和聊天

    版权声明本文由陈怀哲首发自简书:http://www.jianshu.com/users/9f2e536b78fd/latest_articles;微信公众号:陈怀哲(chenhuaizhe2016) ...

  9. Oracle Directory文件夹的知识

    在上一章介绍expdp/impdp时曾使用过DIRECTORY这个概念,以下再简单说明下DIRECTORY的点点滴滴. MOS上对DIRECTORY的解释(266875.1): (1).基于服务端 v ...

  10. BNU10792：沙漠旅行者

    有个旅行者计划横穿沙漠,沙漠中水资源很匮乏.旅行者需要依靠补给站的支持,才能横穿整个沙漠.假设所有的补给站都在一条直线上,而且旅行者一定沿着这条直线走.起点在1号补给站,终点在第N号补给站,起点和终点 ...