运用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. 【转载】 第四范式首席科学家杨强：AlphaGo的弱点及迁移学习的应对（附视频）

    原文地址: https://www.jiqizhixin.com/articles/2017-06-02-2 ============================================= ...

  2. 【转】地球坐标系 (WGS-84) 到火星坐标系 (GCJ-02) 的转换算法 C#

    // // Copyright (C) 1000 - 9999 Somebody Anonymous // NO WARRANTY OR GUARANTEE // using System; name ...

  3. 21Flutter Drawer侧边栏、以及侧边栏内容布局

    Tabs.dart import 'package:flutter/material.dart'; import 'tabs/Home.dart'; import 'tabs/Category.dar ...

  4. Mysql视图介绍

    视图是一个存在于数据库中的虚拟表.视图本身没有数据,只是通过执行相应的select语句完成获得相应的数据.可以理解为select语句的别名. (1).视图的作用 1.如果某个查询结果出现的非常频繁,即 ...

  5. 蒙特卡罗方法计算pi

    import scala.math.random object LocalPi { def main(args: Array[String]) { var count = 0 for (i <- ...

  6. 【leetcode_easy】590. N-ary Tree Postorder Traversal

    problem 590. N-ary Tree Postorder Traversal 参考 1. Leetcode_easy_590. N-ary Tree Postorder Traversal; ...

  7. 解决kalilinux：“下列签名无效： KEYEXPIRED 1425567400"

    Kali linux由于太长时间未更新,而出现GPG错误 KEYEXPIRED 1425567400.经检查源未出现问题可以解析,deb也不冲突,就是密钥过期了. 解决方式 使用一条命令,添加新的密钥 ...

  8. Spark学习笔记0——简单了解和技术架构

    目录 Spark学习笔记0--简单了解和技术架构 什么是Spark 技术架构和软件栈 Spark Core Spark SQL Spark Streaming MLlib GraphX 集群管理器 受 ...

  9. 各种 Java Thread State 分析

    转自:https://www.cnblogs.com/zhengyun_ustc/archive/2013/03/18/tda.html 1,线程状态为“waiting for monitor ent ...

  10. 部署Harbor私有镜像仓库

    Harbor私有镜像仓库无坑搭建 目录 1. harbor介绍 2. docker-ce的安装 3. docker-compose的安装 4. Harbor私有仓库的安装 5. 客户端连接镜像仓库配置 ...