运用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. 关于Mysql中GROUP_CONCAT函数返回值长度的坑

    1.GROUP_CONCAT函数: 功能:将group by产生的同一个分组中的值连接起来,返回一个字符串结果. 语法:group_concat( [distinct] 要连接的字段 [order b ...

  2. Vue+MySQL实现购物车的增删改查

    1,创建简单数据库数据表 2,创建Mapper文件 <!--查询商品--> <select id="selectcommodity" resultType=&qu ...

  3. PAT 甲级 1031 Hello World for U (20 分)(一开始没看懂题意)

    1031 Hello World for U (20 分)   Given any string of N (≥) characters, you are asked to form the char ...

  4. linux上安装pycharm

    百度搜索pycharm 然后打开pycharm的官网 然后在官网首页点击down,下载linux版pycharm 上传到linux服务器.解压 然后再打开bin目录 执行:sh ./pycharm.s ...

  5. Win10使用Tex Live和VS Code和Latex Workshop插件编写Latex文档（未完成版本）

    首先取Tex Live官网下载安装包:https://www.tug.org/texlive/acquire-netinstall.html 我下载的是 http://mirror.ctan.org/ ...

  6. MySQL创建及删除临时表

    示例SQL: drop temporary table if exists testdb.tmp_test_table; create temporary table testdb.tmp_test_ ...

  7. AWS 云上安全最佳实践

    目录 一.账号及访问管理 1.1.多 VPC 还是多账号模式 1.2.多账户模式,选择主 master 账号 二.系统架构安全 2.1.子网建议 2.2.每个可用区子网划分 2.3.安全组的建议 2. ...

  8. 在Electron运行的页面使用CSS的calc导致应用卡死

    这几天发现运行在我们开发的Electron里面的网页有部分应用点击访问就会卡死,通过排除法定位到使用了CSS的calc方法,如下: <el-table height="calc(100 ...

  9. js中遍历对象（5种）和遍历数组（6种）的方法总结（转载）

    一.遍历对象方法 1.for...in遍历输出的是对象自身的属性以及原型链上可枚举的属性(不含Symbol属性),原型链上的属性最后输出说明先遍历的是自身的可枚举属性,后遍历原型链上的 eg: var ...

  10. 【miscellaneous】理解Gstreamer架构

    本文给出了Gstreamer的总体设计.通过阅读本文可以了解Gstreamer的内部工作原理.本文编译自gstreamer源码中的文档,原文在源码中的位置是/gstreamer/docs/design ...