运用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. ABAP Memory ID

    转自:https://blog.csdn.net/lyq123333321/article/details/52659114 (一)          Difference Between SAP a ...

  2. LODOP获取打印状态码和时间列表

    之前有博文介绍获取打印状态码和打印状态码的含义,相关博文:LODOP获取打印机状态码和状态码含义测试.此外 ,也有获取状态码及其变化的方法,可以获取打印状态码的列表,列表包含每个状态和每个状态的时间. ...

  3. EasyNetQ使用(九)【非泛型的发布&订阅扩展方法，发生错误的情况 】

    自从EasyNetQ第一个版本开始,它就可以发布/订阅特定类型的消息. bus.Subscribe<MyMessage>("subscriptionId", x =&g ...

  4. php 字典升序从小到大方法

    /* 字典升序*/ function formatParaMap($paraMap) { $buff = ""; ksort($paraMap); foreach ($paraMa ...

  5. 最新 美团java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.美团等10家互联网公司的校招Offer,因为某些自身原因最终选择了美团.6.7月主要是做系统复习.项目复盘.LeetCode ...

  6. layuiAdmin （单页版）常见问题与解决方案

    最近项目开发中用到了layuiAdmin的单页版进行开发,期间遇到一些问题,在此总结一二: 单页版缓存问题 由于单页面版本的视图文件和静态资源模块都是动态加载的,所以可能存在浏览器的本地缓存问题,因此 ...

  7. CDH建表字符集问题

    登陆metadata数据库: show variables like 'character_set%'; alter database hivemeta default character set l ...

  8. C语言--函数嵌套调用

    一.实验作业(6分) 本周作业要求: 选一题PTA题目介绍. 学习工程文件应用,设计实现学生成绩管理系统. 学生成绩管理系统要求 设计一个菜单驱动的学生成绩管理程序,管理n个学生m门考试科目成绩,实现 ...

  9. [转帖]详解oracle数据库唯一主键SYS_GUID()

    详解oracle数据库唯一主键SYS_GUID() https://www.toutiao.com/i6728736163407856139/ 其实 需要注意 这里满不能截取 因为截取了 就不一定唯一 ...

  10. WUSTOJ 1246: 字符串排序（Java）

    1246: 字符串排序 题目   输入n(n<100)个字符串,每个字符串长度不超过1000,将他们按字典顺序输出.更过内容点击标题. 分析   Java中的ArrayList()可以比较方便的 ...