<!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>

<script src="jquery-1.11.2.min.js"></script>/*引入jquery*/

<script src="tanchuang.js"></script>/*引入弹窗*/

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<link href="tanchuang.css" rel="stylesheet" type="text/css" />/*引入弹窗css*/

</head>

<body>

<input type="button" value="显示" id="btn" />

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

  <tr id="sj">

    <td>代号</td>

    <td>名称</td>

    <td>操作</td>

  </tr>

  <tbody id="tb"></tbody>

</table>
<script type="text/javascript">

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

            $.ajax({

                    url:"nationchuli.php",

                    dataType:"TEXT",

                    success: function(data){

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

                            str="";

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

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

                                    str=str+"<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td><span class='sc' bs='"+lie[0]+"'>删除</span><span class='xq' bs='"+lie[0]+"'>查看详情</span></td></tr>";

                                }

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

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

                                        alert("aa");

                                    });

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

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

                                        $.ajax({

                                                url:"xqchuli.php",

                                                data:{code:code},

                                                type:"POST",

                                                dataType:"TEXT",

                                                success:function(data){

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

                                                    var str="<div>代号:"+lie1[0]+"</div><div>名称:"+lie1[1]+"</div>";

                                                    var btn="<input type='button' value='确定' class='qd' />";

                                                    var tc=new Window({

                                                            title:"详细信息",

                                                            content:str,

                                                            buttons:btn,

                                                        });

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

                                                                $(".zhuti").remove();

                                                                $("#zz").remove();

                                                            });

                                                    }

                                            });

                                    });

                        }

                });

        });

</script>
</body>

</html>

2.处理页面nationchuli.php

<?php

    include("./lei/AAA.class.php");

    $db=new AAA();

    $sql="select * from nation";

    echo $db->StrQuery($sql);

?>

3.处理页面xqchuli.php

<?php

    include("./lei/AAA.class.php");

    $db=new AAA();

    $code=$_POST["code"];

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

    echo $db->StrQuery($sql);

?>

例题.点击按钮显示内容+弹窗效果+ajax的更多相关文章

  1. javascript学习代码--点击按钮显示内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. React 点击按钮显示div与隐藏div，并给div传children

    最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {re ...

  3. 点击按钮显示隐藏DIV，点击DIV外面隐藏DIV

    点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...

  4. JavaScript点击按钮显示 确认对话框

    //JavaScript点击按钮显示确认对话框 <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ...

  5. 安卓TextView限定行数最大值，点击按钮显示所有内容

    问题展示 如上图所示,在普通的TextView中,要求: 最多显示3行 超过三行显示展开按钮 且点击展开按钮显示完整内容 这个需求看似简单,但解决起来会遇到两个较为棘手的问题:1,如何判断是否填满了前 ...

  6. js构建函数，点击按钮显示div，再点击按钮或其他区域，隐藏div

    这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂 ...

  7. jquery点击按钮复制内容

    做移动端的项目遇到一个需求要点击按钮复制dom里的内容,看了很多资料显示必须textarea或者input里的内容才能简单复制,还有就是用插件的了,最终都因为遇到各种问题放弃,最终选择了最简单的点击复 ...

  8. js 实现页面点击按钮复制内容

    前言: 我们平时在页面中是按照长按来实现复制相关的内容,那么怎么用js实现点击按钮实现复制相关的内容呢?请看如下方法: 实现步骤: 1.引入相关的js(ClipboardJS插件) <scrip ...

  9. JavaScript网站设计实践（五）编写photos.html页面，实现点击缩略图显示大图的效果

    一.photos.html页面,点击每一张缩略图,就在占位符的位置那里,显示对应的大图. 看到的页面效果是这样的: 1.实现思路 这个功能在之前的JavaScript美术馆那里已经实现了. 首先在页面 ...

随机推荐

  1. 【HTML5】Server-Sent服务器发送事件

    Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新. 以前也可能做到这一点,前提是网页不得不询问是否有可用的更新.通过服务器发送事件,更新能 ...

  2. DP(优化) UVALive 6073 Math Magic

    /************************************************ * Author :Running_Time * Created Time :2015/10/28 ...

  3. LightOJ1417 Forwarding Emails（强连通分量+缩点+记忆化搜索）

    题目大概是,每个人收到信息后会把信息发给他认识的一个人如此下去,问一开始要把信息发送给谁这样看到信息的人数最多. 首先找出图中的SCC并记录每个SCC里面的点数,如果传到一个SCC,那么里面的人都可以 ...

  4. 【翻译】使用Knockout, Web API 和 ASP.Net Web Forms 进行简单数据绑定

    原文地址:http://www.dotnetjalps.com/2013/05/Simple-data-binding-with-Knockout-Web-API-and-ASP-Net-Web-Fo ...

  5. Android SDK Manager无法更新,内容显示不全的解决办法

    最近在初学android开发,在更新SDK的时候遇到了麻烦. 发现Extras文件夹下为空,没有内容,包括sdk列表也不全面,更新也没有反应 解决方法: 1.在SDK Manager下Tools-&g ...

  6. BZOJ4155 : [Ipsc2015]Humble Captains

    第一问最小割,第二问: 设du[i]表示i点的度数,则要最小化$\frac{|1集合的du[i]之和-2集合的du[i]之和|}{2}$, 压位01背包即可. #include<cstdio&g ...

  7. BZOJ2789 : [Poi2012]Letters

    按照顺序依次找到b串每个字母最后的位置,然后求逆序对. #include<cstdio> #define N 1000010 int n,i,j,k,g[26],nxt[N],bit[N] ...

  8. 【BZOJ】1503: [NOI2004]郁闷的出纳员（Splay）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1503 这题没有看题解就1a了-好开心,, 其实后面去看题解发现他们的都很麻烦,其实有种很简单的做法: ...

  9. 一致性 hash 算法

    consistent hashing 算法早在 1997 年就在论文 Consistent hashing and random trees 中被提出,目前在 cache 系统中应用越来越广泛: 1 ...

  10. Web 在线文件管理器学习笔记与总结（13）重命名文件夹（14）复制文件夹

    (13)重命名文件夹 ① 重命名文件夹通过 rename($oldname,$newname) 实现 ② 检测文件夹名是否符合规范 ③ 检测当前目录中是否存在同名文件夹名称,如果不存在则重命名成功 i ...