用bootstrap设计一个弹框，然后在弹框里面生成表格

<html>

<head>

    <link rel="stylesheet" href="./lib/bootstrap-4.0.0/dist/css/bootstrap.min.css" type="text/css"/>

    <script type="text/javascript" src="./lib/jquery/jquery-3.3.1.min.js"></script>

    <script type="text/javascript" src="./lib/bootstrap-4.0.0/dist/js/bootstrap.min.js"></script>

</head>

<body>

<div id="test">

    <button id="button" class="btn btn-default" style="margin-left: 100px; margin-top: 100px;">click me to show</button>

    <!-- Modal -->

    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"

         aria-hidden="true">

        <div class="modal-dialog modal-md" role="document">

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                        <span aria-hidden="true">&times;</span>

                    </button>

                </div>

                <div class="modal-body">

                    add body content here

                    <table class="table">

                        <tbody id="t-body">

                        </tbody>

                    </table>

                </div>

                <div class="modal-footer">

                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

                </div>

            </div>

        </div>

    </div>

</div>

<script>

    $(function () {

        $("#button").click(function () {

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

            $('#t-body').empty();

            var $r1 = $('<tr></tr>');

            $r1.append($('<td>1</td>'));

            $r1.append($('<td>2</td>'));

            $('#t-body').append($r1);

            var $r2 = $('<tr></tr>');

            $r2.append($('<td>1</td>'));

            $r2.append($('<td>2</td>'));

            $('#t-body').append($r2);

        });

    });

</script>

</body>

</html>
var $r1 = $('<tr></tr>');就是生成一个元素，append就是当成子元素并附加在后面。

jquery表格展示的更多相关文章

  1. 25款顶级的jQuery表格插件

    jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...

  2. jQuery 表格插件25

    jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...

  3. Datatables快速入门开发--一款好用的JQuery表格插件

    博主是一个java后端程序员小白,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jqu ...

  4. 新的表格展示利器 Bootstrap Table

     1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...

  5. 新的表格展示利器 Bootstrap Table Ⅰ

     1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...

  6. JQuery表格插件

    http://www.datatables.club/example/#styling Datatables快速入门开发--一款好用的JQuery表格插件   博主是一个java后端程序员,前端技术会 ...

  7. 25个顶级的jQuery表格插件

    jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...

  8. Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引

    因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...

  9. Web jquery表格组件 JQGrid 的使用 - 11.问题研究

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

随机推荐

  1. Memcached 数据导出与导入

    我们使用 memcached-tool 命令来导出数据: [root@localhost ~]# memcached-tool dump > /tmp/.txt Dumping memcache ...

  2. spine-unity3D 学习笔记

    http://zh.esotericsoftware.com/spine-using-runtimes //skeletonData SkeletonAnimation skeletonAnimati ...

  3. 判断App整体处于前台还是后台

    1.通过RunningTaskInfo类判断(需要额外权限): 复制代码代码如下: /** *判断当前应用程序处于前台还是后台 */ public static boolean isApplicati ...

  4. 关于 g++ 编译器

    g++由自由软件基金发行,g++是基于类unix的c++编译器,通常在命令行运行.它一般附带于类Unix系统中,因此如果你正在运行Unix或Linux系统,它很可能已经存在于你的系统中.你可以对一个源 ...

  5. Python入门 学习笔记

    十六进制:0x123 布尔运算:and, or, not 空值:None 注释:# raw字符串不需要转义:r'XXX' 多行字符:'''XXX''' 多行字符+raw字符串:r'''XXX''' U ...

  6. php计算两个日期时间差（返回年、月、日）

    在PHP程序中,很多时候都会遇到处理时间的问题,比如:判断用户在线了多长时间,共登录了多少天,两个帖子发布的时间差或者是不同操作之间的日志记录等等.在文章中,简单地举例介绍了PHP中如何计算两个日期相 ...

  7. 【架构师之路】 LVS+Keepalived实现高可用负载均衡

    一.原理        1.概要介绍        如果将TCP/IP划分为5层,则Keepalived就是一个类似于3~5层交换机制的软件,具有3~5层交换功能,其主要作用是检测web服务器的状态, ...

  8. 【读书笔记-数据挖掘概念与技术】数据仓库与联机分析处理(OLAP)

    之前看了认识数据以及数据的预处理,那么,处理之后的数据放在哪儿呢?就放在一个叫“数据仓库”的地方. 数据仓库的基本概念: 数据仓库的定义——面向主题的.集成的.时变的.非易失的 操作数据库系统VS数据 ...

  9. Makefile中的MAKECMDGOALS

      make 在执行时会设置一个特殊变量 -- "MAKECMDGOALS" ,该变量记录了命令行参数指定的终极目标列表,没有通过参数指定终极目标时此变量为空.该变量仅限于用在特殊 ...

  10. sencha touch 在线实战培训 第一期 第二节

    2013.12.30晚上8点开的课,仍然有些紧张,开始讲课进度很慢,后面又有些快了... 本期培训一共八节,前三堂免费,后面的课程需要付费才可以观看. 本节内容: 页面实现及跳转控制 跳转容器.路由理 ...