用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. python3.5 中Django框架连接mysql

    ps:mysqldb目前还不支持3.0python唉,最近赶了个新潮,用起了Python3.4跟Django1.6,数据库依然是互联网企业常见的MySql.悲催的是在Python2.7时代连接MySq ...

  2. pyhton验证码识别

    1.PIL 下载地址: PIL-1.1.7.win-amd64-py2.7.exe 2.tesseract-ocr下载地址: tesseract-ocr-setup-3.02.02.exe 3.pyt ...

  3. Ruby Tutorial

    http://www.tutorialspoint.com/ruby/ruby_quick_guide.htm http://www.cnblogs.com/PurpleCow/archive/201 ...

  4. Ansible 如何查看模块文档

    [root@localhost ~]$ ansible-doc -l # 列出所有模块 [root@localhost ~]$ ansible-doc cron # 查看指定模块的文档

  5. Android分包原理

    如果App引用的库太多,方法数超过65536后无法编译.这是因为单个dex里面不能有超过65536个方法.为什么有最大的限制呢,因为Android会把每一个类的方法id检索起来,存在一个链表结构里面. ...

  6. Hadoop计算平均值【转】

    file1.txt a 1b 2a 3b 3a 5b 7c 3c 5 file2.txt a 1b 7c 5a 1c 3 结果: a 2.2b 4.75c 4.0 代码: package org.ap ...

  7. getopenfilename多选文件/文件夹问题和getsavefilename另存为路径

    关于使用getopenfilename多选多个文件是可以的. 以下是多选文件的代码 bool GetNeedOpenFilePath(vector<tstring>& vectFi ...

  8. 《C++ Primer Plus》16.2 智能指针模板类

    智能指针是行为类似于指针的类对象,单这种对象还有其他功能.本节介绍三个可帮助管理动态内存分配的智能指针类.先来看看需要哪些功能以及这些功能是如何实现的.请看下面的函数:void remodel(std ...

  9. luanet分布式lua框架

    luanet最初只是一个网络框架,它简单的封装了一些网络相关接口然后暴露到lua中,让lua可以构建简单的网络应用. 随着我的手游服务器的开发,我发现在C语言中要实现一个简洁易用的RPC调用接口并不容 ...

  10. 子页面iframe跨域执行父页面定义的JS方法

    问题需求:父页面与子页面iframe跨域嵌套,子页面要触发父页面所定义的js方法.父子页面的数据传递. 下文中会用到一些文件:父页面: parent.html嵌在父页面的子iframe页面:child ...