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. 【android学习1】：安装MySQL启动服务失败解决方法

    最近需要用到MySQL,从官网上下载了一个安装文件,但是安装时一直弹出如下提示信息: Configuration of MySQL Server 5.7 is taking longer than e ...

  2. ASP.NET MVC3 通过Url传多个参数方法

    MVC3通过URL传值,一般情况下都会遇到 [从客户端(&)中检测到有潜在危险的 Request.Path 值]的问题 这个问题的解决方法,我的其他博文已经有了说明,这里给出连接 ; [从客户 ...

  3. How To Install Tinc and Set Up a Basic VPN on Ubuntu 14.04

    Introduction In this tutorial, we will go over how to use Tinc, an open source Virtual Private Netwo ...

  4. [LeetCode]题解（python）：037-Sudoku Solver

    题目来源 https://leetcode.com/problems/sudoku-solver/ Write a program to solve a Sudoku puzzle by fillin ...

  5. Block作为property属性实现页面之间传值（代替Delegate代理与协议结合的方法）

    需求:在ViewController中,点击Button,push到下一个页面NextViewController,在NextViewController的输入框TextField中输入一串字符,返回 ...

  6. sqlserver 视图能否有变量

    不能,sqlserver 视图一般不能有变量,也不能带存储过程

  7. js的执行顺序

    js是顺序执行的,但是在一个<script></script>标签中,后面的函数会预加载.如: <script type="text/javascript&qu ...

  8. leetcode算法

    Given a linked list, return the node where the cycle begins. If there is no cycle, returnnull. Follo ...

  9. 关于C、OC、C++、OC++、Swift的一些常识

    关于C.OC.C++.OC++.Swift的一些常识 OC是C语言的一个超集,是一门面向对象的语言,因为苹果的崛起而火,API主要是cocoa(OSX)和cocoatouch(iOS),GCC 和 C ...

  10. iOS系统版本简介

    iOS系统版本简介 ⽬目前iOS设备所⽀支持的最主流操作系统是iOS6,⼤大概占了93%,⽽而使 ⽤用iOS5的iOS设备⼤大概占6%,剩下的只有1%.( 根据苹果的官⽅方数据 ) 从iOS1到现在的 ...