1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <script src="jquery-1.11.2.min.js"></script>/*引入jquery*/
  5. <script src="tanchuang.js"></script>/*引入弹窗*/
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <title>无标题文档</title>
  8. <link href="tanchuang.css" rel="stylesheet" type="text/css" />/*引入弹窗css*/
  9. </head>
  10.  
  11. <body>
  12. <input type="button" value="显示" id="btn" />
  13. <table width="100%" border="1" cellpadding="0" cellspacing="0">
  14.   <tr id="sj">
  15.     <td>代号</td>
  16.     <td>名称</td>
  17.     <td>操作</td>
  18.   </tr>
  19.   <tbody id="tb"></tbody>
  20. </table>
  1. <script type="text/javascript">
  2.     $("#btn").click(function(){
  3.             $.ajax({
  4.  
  5.                     url:"nationchuli.php",
  6.                     dataType:"TEXT",
  7.                     success: function(data){
  8.                             var hang=data.split("|");
  9.                             str="";
  10.                             for(var i=0;i<hang.length;i++){
  11.                                     var lie=hang[i].split("^");
  12.                                     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>";
  13.  
  14.                                 }
  15.                                 $("#tb").html(str);
  16.                                 $(".sc").click(function(){
  17.                                         alert("aa");
  18.                                     });
  19.                                 $(".xq").click(function(){
  20.                                         var code=$(this).attr("bs");
  21.                                         $.ajax({
  22.                                                 url:"xqchuli.php",
  23.                                                 data:{code:code},
  24.                                                 type:"POST",
  25.                                                 dataType:"TEXT",
  26.                                                 success:function(data){
  27.  
  28.                                                     var lie1=data.split("^");
  29.                                                     var str="<div>代号:"+lie1[0]+"</div><div>名称:"+lie1[1]+"</div>";
  30.                                                     var btn="<input type='button' value='确定' class='qd' />";
  31.                                                     var tc=new Window({
  32.                                                             title:"详细信息",
  33.                                                             content:str,
  34.                                                             buttons:btn,
  35.                                                         });
  36.                                                         $(".qd").click(function(){
  37.                                                                 $(".zhuti").remove();
  38.                                                                 $("#zz").remove();
  39.                                                             });
  40.                                                     }
  41.                                             });
  42.                                     });
  43.                         }
  44.  
  45.                 });
  46.  
  47.         });
  48. </script>
  1. </body>
  2. </html>

2.处理页面nationchuli.php

  1. <?php
  2.     include("./lei/AAA.class.php");
  3.     $db=new AAA();
  4.     $sql="select * from nation";
  5.     echo $db->StrQuery($sql);
  6.  
  7. ?>

3.处理页面xqchuli.php

  1. <?php
  2.  
  3.     include("./lei/AAA.class.php");
  4.     $db=new AAA();
  5.     $code=$_POST["code"];
  6.     $sql="select * from nation where code='{$code}'";
  7.     echo $db->StrQuery($sql);
  8. ?>

例题.点击按钮显示内容+弹窗效果+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. SQL Server:查询当前服务器有多少连接请求

    有时DBA需要检查当前服务器有多少连接请求,以及连接请求的登录名,客户端版本,主机名,程序名等等之类的信息,我们就可以对服务器的连接状况有所了解,防止不明用户使用. SQL Server本身提供了这么 ...

  2. 5.AsyncHttp、post

    httpClient // 网络访问请求 new Thread(new Runnable() { @Override public void run() { String url = "ht ...

  3. ural 1156. Two Rounds

    1156. Two Rounds Time limit: 2.0 secondMemory limit: 64 MB There are two rounds in the Urals Champio ...

  4. 操作properties文件，注意抹掉最前面的"file:"

    package com.xiewanzhi.property; import java.io.BufferedInputStream; import java.io.File; import java ...

  5. HDU 4417 (划分树+区间小于k统计）

    题目链接:  http://acm.hdu.edu.cn/showproblem.php?pid=4417 题目大意:给定一个区间,以及一个k值,求该区间内小于等于k值的数的个数.注意区间是从0开始的 ...

  6. 【BZOJ】1601: [Usaco2008 Oct]灌水（kruskal）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1601 很水的题,但是一开始我看成最短路了T_T 果断错. 我们想,要求连通,对,连通!连通的价值最小 ...

  7. BZOJ1224: [HNOI2002]彩票

    Description 某地发行一套彩票.彩票上写有1到M这M个自然数.彩民可以在这M个数中任意选取N个不同的数打圈.每个彩民只能买一张彩票,不同的彩民的彩票上的选择不同.每次抽奖将抽出两个自然数X和 ...

  8. Centos下设置静态IP

    使用VirtualBox装了很多虚拟机,默认采用的DHCP的方式,但是随着虚拟机越来越多以后,这种方式很不方便,所以需要将机器的IP都设置为静态IP 需要添加的几项内容的解释:IPADDR    IP ...

  9. <html:option获取文本值

    <p class="w120">变更后IP:</p> <div class="comBobox w200 f_l"> < ...

  10. linux load average

    性能分析_linux服务器CPU_Load Average 理解Linux系统中的load average(图文版) 理解Load Average做好压力测试 top命令的Load average 含 ...