从数据库中查出一张表，实现功能：
1.查看详情：点击时用弹窗显示出详细内容
2.全选：点击时选框全选
3.批量删除：选中的内容点击按钮可以实现删除
主页：
<head>
<script src="../jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="tanchuang.js"></script>//弹窗引入
<link href="tanchuang.css" rel="stylesheet" type="text/css" />
<style type="text/css">
*{
margin: 0px auto;
}
</style>
</head>
<body>
<div>请输入名称：<input type="text" id="xinxi" /><input type="button" id="btn" value="查询"/></div>
<table id="xianshi" width="100%" border="1" cellpadding="0" cellspacing="0">
</table>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
//做表
$("#btn").click(function(){
var name = $("#xinxi").val();
$.ajax({
async:false,
url:"chuli.php",
data:{d:name},
type:"POST",
dataType:"TEXT",
success: function(data){
var str = "<tr><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><td><input type=‘checkbox‘ class=‘t‘ value=‘"+lie[0]+"‘/>"+lie[0]+"</td><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td><div class=‘ck‘ bs=‘"+lie[0]+"‘>查看详情</div></td></tr>";
}
str +="<tr><td><input type=‘checkbox‘ id=‘all‘ />全选 <input type=‘button‘ value=‘批量删除‘ id=‘delete‘ /></td></tr>";
$("#xianshi").html(str);
//设置弹窗
$(".ck").click(function(){
var t = $(this).attr("bs");
$.ajax({
async:false,
url:"chakan.php",
data:{t:t},
type:"POST",
dataType:"TEXT",
success: function(data)
{
//alert(data);
var lie = data.split("^");
var html = "<div>代号："+lie[0]+"名称："+lie[1]+"价格："+lie[2]+"产地："+lie[3]+"</div>";
//alert(html);
var wd = new Window({
width : 700, //宽度
height : 500, //高度
title : ‘弹窗‘, //标题
content : html, //内容
isMask : true, //是否遮罩
buttons :"", //按钮
isDrag:true,
});
}
});
});
//设置全选
$("#all").click(function(){
var ck = $(".t");
var xz = $(this)[0].checked;
ck.prop("checked",xz);
});
//取选中的值，删除
$("#delete").click(function(){
var ck = $(".t");
for(var i=0;i<ck.length;i++)
{
if(ck.eq(i).prop("checked"))
{
var v = $(".t").eq(i).val();
$.ajax({
url:"shanchu.php",
data:{v:v},
type:"POST",
dataType:"TEXT",
success: function(data){
//alert(data);
if(data=="OK")
{
alert("删除成功！");
window.location="text.php";
}
else
{
alert("删除失败！");
}
}
});
}
}
})
}
});
})
})
</script>
chuli.php页面：
<?php
$name = $_POST["d"];
include("../DBDA.class.php");
$db = new DBDA();
$sql = "select * from fruit where name like‘%{$name}%‘";
echo $db->StrQuery($sql);
chakan.php页面：
<?php
$code = $_POST["t"];
include("../DBDA.class.php");
$db = new DBDA();
$sql = "select * from fruit where Ids = ‘{$code}‘";
echo $db->StrQuery($sql);
shanchu.php页面：
<?php
$ids = $_POST["v"];
include("../DBDA.class.php");
$db = new DBDA();
$sql = "delete from fruit where Ids =‘{$ids}‘";
//echo $sql;
$r = $db->Query($sql,0);
if($r)
{
echo "OK";
}
else
{
echo "NO";
}
时间： 2024-10-25 05:42:52