作业：显示以下界面：
作业要求：
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>
二、处理页面：
<?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);
三、删除处理：
<?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";
}