弹窗显示详情练习

<!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]);

  

原文地址:https://www.cnblogs.com/hamilton/p/5618630.html