弹窗显示详情练习
<!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="popwindow/tanchuang.js"></script> <?php include("../DBDA.php"); $db = new DBDA(); ?> <link href="popwindow/tanchuang.css" rel="stylesheet" type="text/css" /> </head> <body> <table width="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td>汽车名称</td> <td>汽车系列</td> <td>上市日期</td> <td>操作</td> </tr> <?php $sql = "select * from car"; $attr = $db->Query($sql); foreach($attr as $v) { echo "<tr> <td>{$v[1]}</td> <td>{$v[2]}</td> <td>{$v[3]}</td> <td><input type='button' value='查看详情' class='btn' code='{$v[0]}' /></td> </tr>"; } ?> </table> </body> <script type="text/javascript"> $(document).ready(function(e) { $(".btn").click(function(){ //找主键值 var code = $(this).attr("code"); //根据主键查询具体数据 $.ajax({ url:"xqchuli.php", data:{code:code}, type:"POST", dataType:"TEXT", success: function(data){ //拆出数据 var lie = data.split("^"); var html = "<div class='xq'>代号:"+lie[0]+"</div><div class='xq'>名称:"+lie[1]+"</div><div class='xq'>系列:"+lie[2]+"</div><div class='xq'>上市时间:"+lie[3]+"</div><div class='xq'>油耗:"+lie[4]+"</div><div class='xq'>功率:"+lie[5]+"</div><div class='xq'>排量:"+lie[6]+"</div><div class='xq'>价格:"+lie[7]+"</div>"; var win = new Window({ width : 300, //宽度 height : 400, //高度 title : '汽车详情信息', //标题 content : html, //内容 isMask : true, //是否遮罩 //buttons : button, //按钮 isDrag:true,//是否移动 }); } }); }) }); </script> </html>
处理页面
<?php $code = $_POST["code"]; include("../DBDA.php"); $db = new DBDA(); $sql = "select * from car where code = '{$code}'"; $attr = $db->Query($sql); echo implode("^",$attr[0]);