弹窗显示详情练习

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

  

时间: 2024-10-19 13:27:08

弹窗显示详情练习的相关文章

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

作业:显示以下界面: 作业要求: 1.查看详细信息,以弹窗的形式显示,使用ajax2.批量删除 一.主页面 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml

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

以Nation表为例,将Nation表显示在页面上,每一行数据前面加上复选框,后面加上查看详情,点击以弹窗形式显示每一行的数据,并且在表格最后一行加上全选复选框,点击选中全部数据,后面跟一个批量删除按钮,点击删除选中项,如图: 主页面:需要用到弹窗插件,将js与css文件加载过来 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/

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

作业:显示以下界面: 作业要求: 1.查看详细信息,以弹窗的形式显示,使用ajax2.批量删除 一.主页面: <!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&qu

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

1.用ajax做弹窗显示信息详情 nation.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> <me

一款基于jquery的手风琴显示详情

今天要各网友分享一款基于jquery的手风琴显示详情实例.当单击顶部箭头的时候,该项以手风琴的形式展示显示详情.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div align="center"> <span class="openzone" zone="lestrois" id="autoclicklestrois">NOW, OPEN THE THREE !</span

内容太多用省略号代替、内容不换行,鼠标移上去显示详情

//然后是 内容太多用....表示.内容不换行,鼠标移上去显示详情 //这类问题最简单的肯定是使用css解决 // //1. table-layout: fixed 由于table-layout的默认值是auto, //即table的宽高将取决于其内容的多寡,如果内容的体积无法估测,那么最终表格的呈现形式也无法保证了, //fixed一下就好了.(注意:此样式是关键) // //2. white-space: nowrap 是为了保证无论单元格(TD)中文本内容有多少, //都不会自动换行,此时

基于css3的鼠标经过动画显示详情特效

之前为大家分享过一款基于jquery的手风琴显示详情,今天给大家分享基于css3的鼠标经过动画显示详情特效.这款实例鼠标经过的时候基于中间动画放大,效果非常不错,效果图如下: 在线预览   源码下载 实现的代码. html代码: <ul class="blocks"> <li>Vakmanschap en ambacht<div class="popup"> <span> <h3> Vakmanschap

TERSUS画画一样开发软件 显示元件介绍-子页面及弹窗显示元件

TERSUS无代码手机电脑管理类软件开发,其中窗口类显示元件包括:子页面元件(Page Dialog).弹窗显示元件(Modal Dialog) 子页面元件(Page Dialog):是手机和平板移动端设计时所用到的新页面元件,移动端是由各个页面所组成的,在按钮等元件中放置一个页面,前端用户在点击按钮时,就会以新的页面覆盖旧页面,首页中,可以并列显示多个页面,如下: 1.页面元件一般有个头部和主内容区,头部中也有默认元件,所有元件,包括页面元件都可以单独定义显示样式"html.style&quo

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

nation.php 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-e