运用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. Windows10下Anaconda虚拟环境下安装pycocotools

    0 - 步骤 安装visualcppbuildtools_full.exe(链接:https://blog.csdn.net/u012247418/article/details/82314129) ...

  2. 18Flutter中的路由、路由替换、返回到根路由：

    路由: 正常跳转: Navigator.pushNamed(context,'/product');   路由替换: Navigator.pushReplacementNamed(context, ' ...

  3. Scala 踩坑系列

    scala List scala list 如果使用 list(i)的形式进行遍历,如果list数据太多,每次遍历耗时会很久. 因为有一个 head tail 的概念 . 和java的List根据角标 ...

  4. 学习TypeScript 笔记

    TypeScript 什么是TypeScript TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准. TypeScript 由微软开发的自由和开源的编程 ...

  5. 华为OpenStack开源团队人才招募中

    职位要求: 1. 三年以上软件开发经验,编程技能良好. 2. 熟练使用Python.Java.Go或其他语言开发. 3. 有OpenStack经验或者存储经验优先考虑. 4. 良好的学习和沟通能力,责 ...

  6. 【已解决】HttpWebRequest的GetResponse或GetRequestStream偶尔超时 + 总结各种超时死掉的可能和相应的解决办法

    [问题] 用C#模拟网页登陆,其中去请求几个页面,会发起对应的http的请求request,其中keepAlive设置为true,提交请求后,然后会有对应的response: resp = (Http ...

  7. mysl创建用户+授权+增、删、改查

    1.mysql的root用户无法给普通用户授权问题处理 update mysql.user set Grant_priv='Y' where User='root' and Host='%': flu ...

  8. MySQL中使用replace into语句批量更新表数据

    作为示例,我们在这里使用名为testdb的数据库,并且在其中创建两张一模一样的表: drop table if exists test_table_1; create table test_table ...

  9. git 提交大小超过100M

    #MsnDialog.ad, #MyMoveAd, #QQ_Full, #ad-SNSSplashAd, #ad6cn, #adBody07, #adLeftFloat, #adRightFloat, ...

  10. Xamarin.Forms FlyoutIcon 不显示(not shown)

    升级了VS2019到16.4版本,然后默认创建了一个Xamarin Shell程序 结果运行后是这个样子 难道不应该是这个样子吗? 百了个度一晚上没解决,资料本身就少,再就是提示设置FlyoutIco ...