弹窗显示详情练习

Posted 2020-07-30 格调evo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了弹窗显示详情练习相关的知识，希望对你有一定的参考价值。

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

以上是关于弹窗显示详情练习的主要内容，如果未能解决你的问题，请参考以下文章

AJAX实现弹窗显示详情，全选和批量删除

作业：汽车查询--弹窗显示详情，批量删除 php做法

作业：汽车查询--弹窗显示详情，批量删除 ajax做法(0521)

11月10日下午 ajax做显示信息以后用ajaxBootstrp做弹窗显示信息详情

ajax做显示信息以后用ajaxBootstrp做弹窗显示信息详情