jquery表格展示
用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">×</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表格展示的更多相关文章
- 25款顶级的jQuery表格插件
jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...
- jQuery 表格插件25
jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...
- Datatables快速入门开发--一款好用的JQuery表格插件
博主是一个java后端程序员小白,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jqu ...
- 新的表格展示利器 Bootstrap Table
1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...
- 新的表格展示利器 Bootstrap Table Ⅰ
1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...
- JQuery表格插件
http://www.datatables.club/example/#styling Datatables快速入门开发--一款好用的JQuery表格插件 博主是一个java后端程序员,前端技术会 ...
- 25个顶级的jQuery表格插件
jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...
- Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引
因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...
- Web jquery表格组件 JQGrid 的使用 - 11.问题研究
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
随机推荐
- 【代码审计】CLTPHP_v5.5.3后台任意文件删除漏洞分析
0x00 环境准备 CLTPHP官网:http://www.cltphp.com 网站源码版本:CLTPHP内容管理系统5.5.3版本 程序源码下载:https://gitee.com/chich ...
- 安装RVDS2.2
本人经过一晚上的折腾,已经将rvds2.2成功部署在为AMD平台的CPU上面,除了些许小BUG外,编译程序无任何错误,可成功将产上的AXF文件通过Jlink烧制到开发板上. 感谢cdly7475为我们 ...
- Python查找文件
1. 利用字符串的前缀和后缀匹配查找文件 str.startswith() star.endswith() 2.使用fnmatch fnmatch 判断文件名是否符合特定模式 ...
- [XPath] XPath 与 lxml (二)XPath 语法
XPath 选取节点时使用的表达式是一种路径表达式.节点是通过路径(path)或者步(steps)来选取的. 本章使用以下 XML 文档作为示例. <?xml version="1.0 ...
- python中的数据类型与json的数据类型之间的转化
什么是json: JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析和生成.它基于JavaScript Programm ...
- NUC972配置为支持NFS
系统平台:virtualbox3.2.10+ubuntu10.10 安装nfs: #sudo apt-get install nfs-kernel-server ubuntu10.10中的已经是最新版 ...
- GDI+ gif文件的显示和格式转换
GDI+ gif文件的显示和格式转换 gdi+imagedeletenulltiff GDI+ gif文件的显示和格式转换 怎么获取gif文件的每一帧,并且显示出来呢? 1.怎么用gid+显示gi ...
- Android学习之Dialog
在Android开发中,我们经常会需要在Android界面上弹出一些对话框,比如询问用户或者让用户选择.这些功能我们叫它Android Dialog对话框; 实例如下: 1.效果图: 2.XML代码: ...
- 【Laravel5.5】 Laravel 在views中加载公共页面怎么实现
背景: 在做后台功能时候,我们需要把头部和尾部摘出来作为公共模板使用 1:我们使用了Blade模板,并创建一个header.blade.php作为通用的模板.将子页面作为yield输出: header ...
- 【cs229-Lecture2】Gradient Descent 最小二乘回归问题解析表达式推导过程及实现源码(无需迭代)
视频地址:http://v.163.com/movie/2008/1/B/O/M6SGF6VB4_M6SGHJ9BO.html 机器学习课程的所有讲义及课后作业:http://pan.baidu.co ...