1.查看详细信息，以弹窗的形式显示，使用ajax

2.批量删除

“查询”功能可以参考前面的文章，这里只讲解ajax“显示弹窗详情”和“删除”功能

第一:在body中的代码

<title>ajax汽车网页查询</title>

<script src="jquery-2.0.0.min.js"></script>

<script type="text/javascript" src="tanchuang.js"></script>

<link href="tanchuang.css" rel="stylesheet" type="text/css" />

<style type="text/css">

.xq

{

	width:90px;

	height:20px;

	color:#000;

	text-align:center;

	line-height:20px;

	vertical-align:middle;

}

.xq:hover

{

	cursor:pointer;

	background-color:#0FF;

	color:#F00;

}

</style>

</head>

<body>

<h1>汽车查询网页</h1>

<br />

<form action="index.php" method="post">

请输入名称：<input type="text" name="text" value=""/>

    

<input type="submit" value="查询"/>

</form>

<br />

<table width="100%" border="1" cellpadding="0" cellspacing="0" id="xianshi">

</table>

</body>

　　

第二：因为使用ajax，所以代码大部分是在JScript，现实页面函数xianshi()

$(document).ready(function(e) {

xianshi();

//页面显示

function xianshi()

{

	$.ajax({

		async:false,

		url:"chuli.php",

		data:{type:0},

		type:"POST",

		dataType:"TEXT",

		success: function(data){

			var hang=data.split("|");

			var str="<tr><td>代号</td><td>名称</td><td>操作</td></tr>";

			for(var i=0;i<hang.length;i++)

			{

				var lie=hang[i].split("^");

				str+="<tr><td><input type='checkbox' class='m' value='"+lie[0]+"'/>"+lie[0]+"</td><td>"+lie[1]+"</td><td><span class='xq' bs='"+lie[0]+"'>查看详情</span></td></tr>";

			}

			str+="<tr><td><input type='checkbox' id='all'/>全选<input type='button' id='del' value='批量删除'/></td></tr>";

			$("#xianshi").html(str);

			}

		});

　　

第三：查看详情添加弹窗

//给查看详情添加弹窗

	$(".xq").click(function(){

		var code=$(this).attr("bs");

		$.ajax({

			async:false,

			url:"chuli.php",

			data:{code:code,type:1},

			type:"POST",

			dataType:"TEXT",

			success: function(data)

			{

				var lie=data.split("^");

				var html="<div>名称："+lie[1]+"</div><div>生产时间："+lie[3]+"</div><div>油耗："+lie[4]+"</div><div>动力："+lie[5]+"</div><div>排放量："+lie[6]+"</div><div>价格："+lie[7]+"</div>";

				var Wd=new Window({

					width:600,

					height:400,

					title:'汽车详情',

					content:html,

					isMask:true,

					buttons:"",

					isDrag:true,

					});

			},

			});

		});

　　

第四：全选功能

//全选

		$("#all").click(function(){

			var jd=$(this)[0].checked;

			var jc=$(".m");

			jc.prop("checked",jd);

			});

　　

第五：批量删除功能

//批量删除

		$("#del").click(function(){

			var jc=$(".m");

			var str="";

			for(var i=0;i<jc.length;i++)

			{

				if(jc.eq(i).prop("checked"))

				{

					str+=jc.eq(i).val()+"|";

				}

			}

			str = str.substr(0,str.length-1);

			$.ajax({

				async:false,

				url:"chuli.php",

				data:{str:str,type:2},

				type:"POST",

				dataType:"TEXT",

				success: function(data)

				{

					alert(data);

					xianshi();

				},

				});

			});

　　

第六：ajax中调用的chuli.php页面

<?php

include("DBDA.class.php");

$db=new DBDA();

$type=$_POST["type"];

switch($type)

{

	case 0:

		$sql = "select * from car";

		echo $db->StrQuery($sql);

		break;

	case 1:

		$code = $_POST["code"];

		$sql = "select * from car where Code = '{$code}'";

		echo $db->StrQuery($sql);

		break;

	case 2:

		$str = $_POST["str"];

		$attr = explode("|",$str);

		$tj = implode($attr,"','");

		$sql = "delete from car where Code in ('{$tj}')";

		if($db->Query($sql,1))

		{

			echo "删除成功！";

		}

		else

		{

			echo "删除失败！";

		}

		break;

	default:

		echo "";

}

　　

ajax“显示弹窗详情”和“删除”功能练习的更多相关文章

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

    1.用ajax做弹窗显示信息详情 nation.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

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

    1.用ajax做弹窗显示信息详情 nation.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  3. Mvc音乐商店demo的ajax异步删除功能总结

    刚刚从学校出来参加工作,没啥工作经验,所以各位大神们不要嘲笑哈! 来公司后要进行培训,给我们的作业中有一个使用 dapper+mvc+ajax+SQL Server 2008,来实现一个音乐商店的de ...

  4. ajax中网页传输（一）TEXT——带有删除功能的数据库表格显示练习

    网页之间传输的三种方式:TEXT.JSON.XML. 本章将讲解带有TEXT形势的ajax网页传输 第一:body部分代码 <title>ajax中TEXT讲解并且带有删除功能的表格< ...

  5. 02 - Unit07：显示笔记下拉菜单、笔记的分享功能、笔记的删除功能

    显示笔记下拉菜单 笔记的分享功能 发送Ajax请求 绑定事件:绑定分享按钮单击事件 参数获取:笔记ID 发送请求:/share/add.do 服务器处理 ShareController ShareSe ...

  6. Windows下环境变量显示、设置或删除操作详情

    显示.设置或删除 cmd.exe 环境变量. SET [variable=[string]] variable 指定环境变量名. string 指定要指派给变量的一系列字符串. 要显示当前环境变量,键 ...

  7. 使用EasyUI实现加入和删除功能

    增删该查是不论什么一个项目都少不了的功能操作.这篇博文主要简单介绍一下怎样使用EasyUI实现加入和删除功能. 首先.导入EasyUI的js代码: <link href="~/Easy ...

  8. 实例：SSH结合Easyui实现Datagrid的批量删除功能

    在我先前的基础上面添加批量删除功能.实现的效果如下 删除成功 通常情况下删除不应该真正删除,而是应该有一个标志flag,但flag=true表示状态可见,但flag=false表示状态不可见,为删除状 ...

  9. react.js CMS 删除功能的实现

    页面效果图: 数据操作分析: 在查询表组件的  TableData.js 中操作如下内容: 给每一行绑定一个checkbox,且在点击这个 checkbox 时,触发 action 中的一个方法(fo ...

随机推荐

  1. php---JSON和JSONP

    JSON和JSONP (含jQuery实例)(share) 来源:http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jque ...

  2. Ubuntu 14.04安装OpenCV 3.1

    从OpenCV官网上下载OpenCV官网上下载OpenCV的未编译源代码: 点击这里 国内很多网络打开OpenCV官网速度缓慢,可以点击如下地址直接从GitHub上下载OpenCV 3.1的源代码 下 ...

  3. Windows-008-VirtualBox 安装 Win7 前沿配置详解

    此文主要讲述在 Windows 系统下安装虚拟机 VirtualBox,及用 VirtualBox 安装 Win7 Professional 64bit 操作系统的前沿配置为例,配以图文进行详细的讲解 ...

  4. iOS：GPUImage强大的图像处理框架

    GPUImage是一个非常棒的图像处理的开源库,里面提供了非常非常多的滤镜效果来加工图像. 不过就是因为太多效果了,而且对于程序员来说,那么多效果并不清楚知道要用那一个.于是我就使用提供的默认值,加上 ...

  5. 请问下./在Linux下是什么意思

    请问下./在Linux下是什么意思 http://zhidao.baidu.com/link?url=1f-80KN7cdi-7XECpwXLUn6Ps4reMBL2zB6eiDk7JliwDgW6k ...

  6. linux截取指定字符shell cut awk

    [root@mylab demo]# echo $var939f61b61978a589d9873e9ea7fdf201b213dec2[root@mylab demo]# echo ${var:0: ...

  7. Sublime text 3 SVN插件及使用方法

    前提是你电脑里已装有SVN,这时只是设置快捷调用SVN. 1.通过快捷键 ctrl+` 或者 View > Show Console 菜单打开控制台 2.粘贴对应版本的代码后回车安装 适用于 S ...

  8. 查找g++文档的方法

    http://www.gnu.org/ -> Software(http://www.gnu.org/software/software.html) ->搜索 "gcc" ...

  9. RAC object remastering ( Dynamic remastering )

    RAC环境中,每个数据块都被一个instance所管控(mastered),管控数据块的instance被称作主实例(master instance).管控数据块就是说主实例(master insta ...

  10. git提交

    1.git pull 本地已经commit 2.git checkout master 3.git pull 4.git checkout - 5.git merge master 6.git pus ...