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. Asp.Net ORM

    Entity Framework https://msdn.microsoft.com/zh-cn/data/jj193542 NuGet命令获取组件方式: 键入“get-help NuGet”以查看 ...

  2. ArcGIS Engine开发之旅08--和查询相关的对象和接口

    原文:ArcGIS Engine开发之旅08--和查询相关的对象和接口 查询在GIS领域应该是一个很频繁的操作,在GIS中除了具有属性查询(和其他关系型数据库的查询类似),还提供了空间查询.在介绍查询 ...

  3. [LeetCode]题解（python）：112 Path Sum

    题目来源 https://leetcode.com/problems/path-sum/ Given a binary tree and a sum, determine if the tree ha ...

  4. Linux 性能工具 - sar学习

    简介 sar是一款在linux下的性能工具,可以观察到CPU,内存,IO,运行队列,每秒上下文切换等信息. 软件工具安装 #Ubuntu sudo apt-get install sysstat # ...

  5. JS的基础类型与引用类型

    两种类型: ECMAScript变量包含两种不同类型的值:基本类型值.引用类型值: 基本类型值:指的是保存在栈内存中的简单数据段: 引用类型值:指的是那些保存在堆内存中的对象,意思是,变量中保存的实际 ...

  6. Hibernate报错解决Error parsing JNDI name []，Need to specify class name

    能实现写数据,但是报错. 出错信息: 十月 21, 2016 3:46:18 下午 org.hibernate.Version logVersionINFO: HHH000412: Hibernate ...

  7. ChatForFun 公众号使用说明

    使用方法 2016-07-16 DennisMi ChatForFun 1,发送  #1 实现登陆,或者退出登陆 2,发送  #2 实现加入聊天,和退出聊天 3,聊天开始后,可以直接发送消息 4,如果 ...

  8. Step by Step

    数据库设计Step by Step篇目整理及下载地址 系列篇目 1. 数据库设计 Step by Step (1)——扬帆启航 2. 数据库设计 Step by Step (2)——数据库生命周期 3 ...

  9. 第八篇 SQL Server代理使用外部程序

    本篇文章是SQL Server代理系列的第八篇,详细内容请参考原文 在这一系列的上一篇,学习了如何用SQL Server代理作业活动监视器监控作业活动和查看作业历史记录.在实时监控和管理SQL Ser ...

  10. html 二级联动（省市联动）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...