• 作业:汽车查询--弹窗显示详情,批量删除 php做法(0521)


    作业:显示以下界面:

    作业要求:

    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>
    <link href="tanchuang.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    *{
        margin: 0px auto;
    }
    
    .ckxq
    {
        width:80px;
        height:25px;
        background-color:#09F;
        color:#FFF;
        text-align:center;
        line-height:25px;
        vertical-align:middle;
        
        }
    .ckxq:hover
    {    
        cursor:pointer;
        background-color:#FF6B24;
        }
    </style>
    
    
    </head>
    
    <body>
    
    <h1>汽车查询页面</h1>
    <?php
    //输入查询
    include ("../DBDA.class.php");
    $db=new DBDA();
    $value="";
    $str="";
    if(!empty($_POST["name"]))
    {
        $name=$_POST["name"];
        $str=" where name like '%{$name}%'";
        $value=$name;
        }
    ?>
    
    <form action="qiche.php" method="post">
    <div>请输入查询内容:<input type="text" name="name" value="<?php echo $value;?>">
    <input type="submit" value="查询" /></div>
    </form>
    
    <br />
    <table width="100%" border="1" cellpadding="0" cellspacing="0" id="biao">
    <tr>
    <td>代号</td>
    <td>名称</td>
    <td>系列</td>
    <td>油耗</td>
    <td>功率</td>
    <td>价格</td>
    <td>操作</td>
    </tr>
    
    
    <?php
    //表格内容显示
    
    $sql="select * from car".$str;
    $attr=$db->Query($sql);
    foreach($attr as $v)
    {
        $rp="<mark>{$value}</mark>";
        $rpstr=str_replace($value,$rp,$v[1]);
        echo "<tr>
        <td width=250><input type='checkbox' value='{$v[0]}' class='ck'>{$v[0]}</td>
        <td>{$rpstr}</td>
        <td>{$v[2]}</td>
        <td>{$v[4]}</td>
        <td>{$v[5]}</td>
        <td>{$v[7]}</td>
        <td><div class='ckxq' bs='{$v[0]}'>查看详情</div></td>    
        </tr>";
        
        }
    ?>
    <tr><td colspan="7"><input type="checkbox" id="qx" />全选
     <input type="button" value="批量删除" id="sc"></td></tr>
    </table>
    </body>
    <script type="text/javascript">
    $(document).ready(function(e) {
        
        //点击全选
        $("#qx").click(function(){
            var ck=$(".ck");
            var qx=$(this)[0].checked;
            ck.prop("checked",qx);
        })
        
        
        
        //批量删除
        $("#sc").click(function(){
                var cd=$(".ck");
                for(var i=0;i<cd.length;i++)
                {
                        if(cd.eq(i).prop("checked"))
                        {
                            var code=cd.eq(i).val();
                    
                        $.ajax({
                            
                            url:"delete.php",
                            data:{code:code},
                            type:"POST",
                            dataType:"TEXT",
                            success: function(data){
                                if(data.trim()=="OK")
                                {
                                      window.location.href="qiche.php";
                                }
                                else
                                {
                                    alert ("删除失败!");    
                                }
                                
                                                        
                            }            
                        });
                    }
                }
                    
                
        })
        
        
        //查看详情
        $(".ckxq").click(function(){
                
                var nr=$(this).attr("bs");
                $.ajax({
                    url:"chu.php",
                    data:{nr:nr},
                    type:"POST",
                    dataType:"JSON",
                    success:function(data)
                    {    
                        var str = "";
                        for(var k in data)
                        {
                            str+="<div>"+data[k][0]+"</div>";
                            str+="<div>"+data[k][1]+"</div>";
                            str+="<div>"+data[k][2]+"</div>";
                            str+="<div>"+data[k][3]+"</div>";                        
                        }
                        
                         
                        var html="<div>"+str+"</div>";
                        
                        //var button ="<input type='button' value='确定' /><input type='button' value='取消' />";
                        var win = new Window
                        ({
                            
                            width : 700, //宽度
                            height : 500, //高度
                            title : '查看详情', //标题
                            content : html, //内容
                            isMask : true, //是否遮罩
                            buttons :"", //按钮
                            isDrag:true,
                                            
                        });
                        }
                    
                });
                        
        })
        
        
    });
    
    
    </script>
    </html>
    View Code

    二、处理页面:

    <?php
    $nr=$_POST["nr"];
    include ("../DBDA.class.php");
    $db=new DBDA();
    $sql="select * from car where code='{$nr}'";
    
    echo $db->JsonQuery($sql,0);
    
    //attr=$db->Query($sql);
    //echo json_encode($attr);
    View Code

    三、删除处理:

    <?php
    $code=$_POST["code"];
    include ("../DBDA.class.php");
    $db=new DBDA();
    $sql="delete from car where Code='{$code}'";
    $r=$db->Query($sql,1);
    if($r)
    {
        echo "OK";
        }
    else
    {
        echo "NO";
        }
    View Code
  • 相关阅读:
    Android之TCP服务器编程
    太阳能锂电池充电电路
    android之WIFI小车编程详述
    java 之UDP编程
    liunx目录/etc下相关配置
    五:ZooKeeper的集群命令客户端的链接和命令操作的使用
    四:ZooKeeper的集群,伪集群,单机的搭建
    三:ZooKeeper的ZAB协议
    二:ZooKeeper术语概念
    一:ZooKeeper简介
  • 原文地址:https://www.cnblogs.com/ds-3579/p/5514394.html
Copyright © 2020-2023  润新知