表格：全选，删除，跳出弹窗
Posted 万里冰封
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了表格：全选，删除，跳出弹窗相关的知识，希望对你有一定的参考价值。
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;
以上是关于表格：全选，删除，跳出弹窗的主要内容，如果未能解决你的问题，请参考以下文章