从数据库中查出一张表，实现功能：
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"; }