运用bootstrap,jquery和ajax显示一些数据，附加删除功能并且点击能弹出模态框详情功能

主页面main.php

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

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

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

<link type="text/css" href="../FENGZHUANG/bootstrap/css/bootstrap.min.css" rel="stylesheet" />    //引入bootstrap的css文件

<script src="../FENGZHUANG/jquery-3.1.1.min.js"></script>  //先引入jquery的js文件

<script src="../FENGZHUANG/bootstrap/js/bootstrap.min.js"></script>  //再引入其它的js文件

<style type="text/css">

.xq{ margin-left:30px}

</style>

</head>

<body>

<div class="page-header">

    <h1>显示数据

    </h1>

</div>

<table class="table table-hover">

  <thead>

    <tr>

      <th width="30%">代号</th>

      <th width="30%">名称</th>

      <th width="40%">操作</th>

    </tr>

  </thead>

  <tbody id="tb">

   //用js向其中添加内容

  </tbody>

</table>

<!-- 模态框（Modal） -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

                <h4 class="modal-title" id="myModalLabel">详细信息</h4>

            </div>

            <div class="modal-body" id="nr">

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

            </div>

        </div><!-- /.modal-content -->

    </div><!-- /.modal -->

</div>

</body>

<script type="text/javascript">

//加载数据

Load();

//加载数据的方法

function Load()

{

$.ajax({

        url:"jiazai.php",

        dataType:"TEXT",

        success: function(data){

                var str = "";

                var hang = data.split("|");  //根据字符串中的|分解

                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><button type='button' class='btn btn-info btn-sm sc' code='"+lie[0]+"'>删除</button><button type='button' class='btn btn-primary btn-sm xq' code='"+lie[0]+"'>查看</button></td></tr>";

                }

                $("#tb").html(str); //向tbody中输出内容

                addshanchu();

                addxiangqing();

            }

    });

}

//给删除按钮加事件的方法

function addshanchu()

{

//删除事件

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

                    var code = $(this).attr("code");  //获取删除按钮所在的数据的code

                    $.ajax({

                        url:"shanchu.php",

                        data:{code:code},

                        dataType:"TEXT",

                        type:"POST",

                        success: function(d){

                            if(d.trim()=="OK")

                            {

                                alert("删除成功");

                                Load(); //删除完需要加载数据

                            }

                            else

                            {

                                alert("删除失败");

                            }

                        }

                        });

                    })

}

//给查看详情加事件的方法

function addxiangqing()

{

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

        //显示模态框

        $('#myModal').modal('show');

        //在模态框里面显示内容

        var code = $(this).attr("code");  //获取哪一条数据

        $.ajax({

            url:"xiangqing.php",

            data:{code:code},

            dataType:"TEXT",

            type:"POST",

            success:function(data){

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

                var str = "<div>民族代号："+lie[0]+"</div><div>民族名称："+lie[1]+"</div>";

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

            }

        });

    })

}

</script>

</html>

加载数据的页面jiazai.php

<?php

include("../FENGZHUANG/DBDA.class.php");

$db = new DBDA();

$sql = "select * from nation order by code ASC";

$arr = $db->Query($sql);

// 下面实现的字符串是类似这样的n001^汉族|n002^回族|n003^苗族

$str = "";返回主页面的数据是TEXT型，得转换一下

foreach($arr as $v)

{

    $str = $str.implode("^",$v)."|"; //拼接字符串

}

$str = substr($str,0,strlen($str)-1); //去掉末尾的|字符。

echo $str;

删除处理页面shanchu.php

<?php

include("../FENGZHUANG/DBDA.class.php");

$db = new DBDA();

$code = $_POST["code"];

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

if($db->Query($sql,0))

{

    echo "OK";

}

else

{

    echo "NO";

}

查看详情页面xiangqing.php

<?php

$code = $_POST["code"];

include("../fengzhuang/DBDA.class.php");

$db = new DBDA();

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

echo $db->StrQuery($sql);

ajax对数据删除、查看详情功能的更多相关文章

  1. 用ajax对数据进行查看人员信息

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

  2. jQuery获取表格隐藏域与ajax请求数据结合显示详情

    0.表格样式

  3. 用ajax对数据进行删除和查看

    删除和查看详情操作的共同语句:就是怎么显示表? 1.在主体中写表的开头行,想要显示的内容,并且加载数据也要显示的地方也建张表 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 & ...

  4. ajax bookstrap美化网页，并实现页面的加载，删除与查看详情

    Bookstrap:美化页面: Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS ...

  5. MVC5 + EF6 + Bootstrap3 (13) 查看详情、编辑数据、删除数据

    Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-rud.html 系列教程:MVC5 + EF6 + Boo ...

  6. ajax——优化0126（增删改查：添加查看详情，返回结果类型为JSON型，在窗口显示）

    效果: 鼠标点击查看详情时 数据库: 0126.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  7. 3、尚硅谷_SSM高级整合_使用ajax操作实现删除的功能

    点击删除的时候,要删除联系人,这里同点击编辑按钮一样给删除按钮添加点击事件的时候不能使用 $(".delete_btn").click(function(){ }); 这种方式,因 ...

  8. Windows服务器的重复数据删除功能

    自从Windows server 2012开始,微软在系统层面提供了重复数据删除功能.重复数据删除是为了文件服务器.虚拟化服务器等设计的.其实只要是存放的文件有大部分内容是相同的就可以发挥很好的效果. ...

  9. Zookeeper命令行操作(常用命令；客户端连接；查看znode路径；创建节点；获取znode数据，查看节点内容，设置节点内容，删除节点；监听znode事件；telnet连接zookeeper)

    8.1.常用命令 启动ZK服务 bin/zkServer.sh start 查看ZK服务状态 bin/zkServer.sh status 停止ZK服务 bin/zkServer.sh stop 重启 ...

随机推荐

  1. 008-多线程-JUC集合-Queue-LinkedBlockingQueue

    一.概述 LinkedBlockingQueue是一个单向链表实现的阻塞队列.该队列按 FIFO(先进先出)排序元素,新元素插入到队列的尾部,并且队列获取操作会获得位于队列头部的元素.链接队列的吞吐量 ...

  2. flutter showDatePicker显示中文日期_Flutter时间控件显示中文

    flutter showDatePicker showTimePicker显示中文日期 1.配置flutter_localizations依赖 找到pubspec.yaml配置flutter_loca ...

  3. 阶段5 3.微服务项目【学成在线】_day18 用户授权_05-方法授权-方法授权测试

    这是我们课程的服务里面 加了授权的方法 重启课程管理的服务 首先需要登陆 在redis复制token 访问课程列表 用最新复制的令牌 最新token可以 调用teachplan方法 调用 一个没加注解 ...

  4. 第十一章 缓存机制——《跟我学Shiro》

    转发地址:https://www.iteye.com/blog/jinnianshilongnian-2029217 跟我学Shiro  目录贴:跟我学Shiro目录贴 Shiro提供了类似于Spri ...

  5. 生成对抗网络GAN详解与代码

    1.GAN的基本原理其实非常简单,这里以生成图片为例进行说明.假设我们有两个网络,G(Generator)和D(Discriminator).正如它的名字所暗示的那样,它们的功能分别是: G是一个生成 ...

  6. python爬取网页数据方法

    """#最基本,请求地址无参数# response=urllib.request.urlopen("https://www.scetc.edu.cn" ...

  7. linux环境启动rocketmq服务 报connect to <10.4.86.6:10909> failed异常

    解决方式: 需要给Producer和Consumer的DefaultMQPushConsumer对象set这个参数,生产者和消费者都需要,否则不能正常消费消息: 这个问题解决后可能还会出现: conn ...

  8. 路由器设置 WDS 桥接

    步骤: 1.先更改路由器LAN口地址,然后重启路由器 2.连接SSID信道名称,先关闭DHCP服务,然后进入无线设置,基本设置,更改SSID号,开启WDS桥接,保存 3.连接新的SSID名称,无线设置 ...

  9. LeetCode. 颠倒二进制位

    题目要求: 颠倒给定的 32 位无符号整数的二进制位. 示例: 输入: 00000010100101000001111010011100 输出: 001110010111100000101001010 ...

  10. 20191011-构建我们公司自己的自动化接口测试框架-Util的ClearData模块

    cleardata模块主要是用于在每次测试之前清除历史执行痕迹,主要代码如下: from Util.ParseExcel import * from ProVar.ProjConfigVar impo ...