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. C++ Primer Pluse_6_课后题

    #include <iostream> #include <cctype> #include <array> #include <string> #in ...

  2. Gulp自动化工具之图片压缩

    一.安装node https://nodejs.org/download/ 根据需要选择对应的版本 安装好了之后可以通过node -v参看一下版本 node -v 二.安装gulp npm insta ...

  3. 转：ASP.NET MVC利用TryUpdateModel来做资料更新 (一)

    前言有使用 ASP.NET MVC 的朋友们一定多多少少有听过 TryUpdateModel,之前就看了很多有关它的文章,但在专案实务上都未曾实际使用过,而 TryUpdateModel 不仅能利用 ...

  4. 【上手centos】一、前情以及sublime_text_3安装

    笔记本自大一入手,只重装过一次系统,从不曾拆机清灰过.读研之后,日常工作与学习都在实验室进行,笔记本一直在宿舍的桌子上落灰,只偶尔打开来看个电影.上周末,心血来潮,把笔记本抱到实验室拆了清灰,以前一直 ...

  5. LightOj 1024 - Eid (求n个数的最小公约数+高精度)

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1024 题意:给你n(2<=n<=1000)个数, 然后求n个数的最小公倍数 ...

  6. 运用SET ANSI_PADDING OFF创建某个字段为自增列的表，以及插入数据

    SET ANSI_PADDING OFFGOPRINT 'Testing with ANSI_PADDING OFF'GO CREATE TABLE WebsitesPaddingOFF (id in ...

  7. LeetCode Flip Game II

    原题链接在这里:https://leetcode.com/problems/flip-game-ii/ 题目: You are playing the following Flip Game with ...

  8. Java: Difference between ArrayList and LinkedList

    Basically, they are just two different implementations of List interface. LinkedList is implemented ...

  9. 使用pycharm远程调试python代码

    使用 pycharm 进行 python 代码远程调试 pycharm 的远程调试是从远程机器连接到本地机器,需要在远程机器的py文件中指定本地机器的IP和端口. 远程机器上,通过easy_insta ...

  10. QT中静态库的生成与使用

    一. 静态库的生成    1. 测试目录: lib    2. 源码文件名: mywindow.h, mywindow.cpp, 类MyWindow继承于QPushButton, 并将文字设置为&qu ...