表格：全选，删除，跳出弹窗

5-22pm.php

<!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>


<!--加载jquery和js-->
<script src="jquery-2.1.1.min.js"></script>
<script src="tanchuang.js"></script>
<!--给查看详情定义样式表-->
<style type="text/css">
.a
{
    background-color:#0C9;
    color:#F00;
    font-size:24px
}
.a:hover
{
    background-color:#CCC
}
</style>
</head>
<!--加载弹窗 css 样式表-->
<link href="tanchuang.css" rel="stylesheet" type="text/css" />

<body>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>代号</td>
<td>汽车名称</td>
<td>价格</td>
<td>油耗</td>
<td>功率</td>
<td>操作</td>
</tr>

<?php
include("Tp.class.php");
$db = new Tp();
$sql="select * from car";
$result=$db->query($sql);
foreach($result as $v)
{
    echo "<tr>
    <td><input type='checkbox' class='t' value='{$v[0]}' />{$v[0]}</td>
    <td>{$v[1]}</td>
    <td>{$v[2]}</td>    
    <td>{$v[4]}</td>
    <td>{$v[5]}</td>
    <td><span class='a' bs='$v[0]'>查看详情</span></td>
    </tr>";
        
}
?>

<tr>
<td colspan="6">
    <input type="checkbox" id="q"  />全选
    <input type="button" id="bt"  value="删除选中"/>
</td>
</tr>
</table>
</body>

<script type="text/javascript">
$(document).ready(function(e) {
    
    //全选:加载一个点击事件
    $("#q").click(function(e) {
        var ck = $(".t");
        var k = $(this)[0].checked;
        ck.prop("checked",k);
        
    });
    
    //删除事件
    $("#bt").click(function(e) {
        var ck = $(".t");
        for(var i=0;i<ck.length;i++)
        {
            if(ck.eq(i).prop("checked"))
            {
                var pd=ck.eq(i).val();
                $.ajax({
                    async:false,
                    url:"shanchu.php",
                    data:{pcode:pd},
                    type:"POST",
                    dataType:"TEXT",
                    success: function(data)
                    {
                        if(data.trim()=="NO")
                        { alert(删除失败);}
                    }                    
                    
                    })
            }
        }
        //页面刷新函数，刷新本页面
        window.location="5-22pm.php";
    });
    

<!--出现弹窗:加载弹窗的 js，css 样式表-->
$(".a").click(function(e) {
    var pcode = $(this).attr("bs");
    $.ajax({
        async:false,
        url:"chuli5.php",
        data:{pcode:pcode},
        type:"POST",
        dataType:"TEXT",
        success: function(data)
        {
            var str=data.split("^");
            var html="<br>代号:"+str[0]+"<br>汽车名称:"+str[1]+"<br>价格:"+str[2]+"<br>油耗:"+str[3]+"<br>功率:"+str[4];
                //初始化，接收参数
            var win = new Window({
                width :300, //宽度
                height : 200, //高度
                buttons : '', //默认无按钮
                title : "详细信息", //标题
                content :html, //内容,(自己定义)
                isMask :  true, //是否遮罩
                isDrag : true, //是否移动
            });
    
        }
    });    
    
});    
    
    
});


</script>
</html>

shanchu.php

<?php
//接收数据
$pcode=$_POST["pcode"];

include("./Tp.class.php");
$db=new Tp();
$sql="delete from car where Code='{$pcode}'";
$attr=$db->query($sql,1);//这是其他操作，因此设置为 1

if($attr)
{
    echo "OK";//删除成功
}
else
{
    echo "NO";
}



?>

chuli5.php

<?php
//把处理结果做成字符串返回
$pcode=$_POST["pcode"];
include("Tp.class.php");
$db=new Tp();

$sql= "select Code,Name,Brand,Oil,Powers from car where Code='{$pcode}'";

//执行
$result = $db->query($sql);
$str="";
foreach($result as $v)
{
    $str=$str.implode("^",$v);
    $str=$str."|";
}
$str=substr($str,0,strlen($str)-1);
echo $str;