如果是从数据库度的数据的话，表格的每一条数据都有一个独一无二id。将展开显示的内容写好，隐藏，例如
然后展开按钮，领id="${id}"，例如
然后是js部分：
jQuery(document).ready(function($) {
$('.mybtn').click(function(){
$('#hidetr_'+$(this).attr('id')).toggle();
});
});
- 其他相关推荐
- bootstrap 表格添加一行表格
- ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Document</title> <script src="static/js/import.inc.js"></script> </head> <style type="text/css"> .table{ margin-top: 5px; } .button{ margin-top: 8px; margin-left: 10px; } </style> <script type="text/javascript"> $(function(){ //编辑表格 $('#reportTable').bootstrapTable({ //数据来源的网址 url:'/index.xhtml', method: 'post', editable:true,//开启编辑模式 clickToSelect: true, showPaginationSwitch:true, //显示分页切换按钮 search: true, //显示检索框 showRefresh: true, //显示刷新按钮 showToggle:true, //显示切换按钮来切换列表/卡片视图 pagination: true, pageList: [5,25], pageSize:5, pageNumber:1, columns: [[ {field:"id",edit:false,title:"编号",align:"center"}, {field:"user_company",edit:{ type:'select',//下拉框 //数据来源地址 //url:'user/getUser.htm', data:[{id:1,text:'lzx'},{id:2,text:'lsl'}], valueField:'id', textField:'text', onSelect:function(val,rec){ console.log(val,rec); } },title:"下拉框",align:"center",width:"200px"}, {field:"time",edit:{ type:'date',//日期 required:true, click:function(){ } },title:"时间",align:"center"}, {field:"name",title:"名字",align:"center"}, {field:"age",title:"年龄",align:"center"}, {field:"gender",title:"性别",align:"center",width:"200px",formatter:function(value,row,rowIndex){ if(value==1){ return '男'; }else if(value==2){ return '女'; } },edit:{ type:'select',//下拉框 //数据来源地址 data:[{id:1,text:'男'},{id:2,text:'女'}], valueField:'id', textField:'text', onSelect:function(val,rec){ console.log(val,rec); } }} // {field:"userstatus_end_time",title:"操作",align:"center",formatter:function(value,row,rowIndex){ // var strHtml ='<a href="javascript:void(0);" onclick="removeRow('+row+')">删除</a>'; // return strHtml; // },edit:false} ]] }); $('#addRowbtn').click(function(){ var data = {}; $('#reportTable').bootstrapTable('append',data); }); $('sava').onClickCell(function(){ }); }); function removeRow(row){ console.log(row); } function update(){ var row = $('#reportTable').bootstrapTable('getSelections') console.log(row) location.href="delete.action?uid="+row.uid var row = $('#dg').datagrid('reload'); } function sava(){ var row = $('#reportTable').bootstrapTable('getSelections'); if(row.length==1){ console.log(a[0].id); }else{ console.log(row.name); alert("请选中一行") } } </script> <body> <div id="myTabContent" class="tab-content" style=""> <!--可编辑表格--> <div class="tab-pane fade in active button" id="tab2"> <button type="button" class="btn btn-success dropdown-toggle" id="addRowbtn"> <span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span>增加 </button> <button type="button" class="btn btn-warning" onclick="javascript:update()"> <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>修改 </button> <button type="button" class="btn btn-info" onclick="javascript:sava()" id="sava"> <span class=" glyphicon glyphicon-floppy-save" aria-hidden="true"></span>保存 </button> </div> </div> <div> <table class="table table-striped table-hover" id="reportTable"></table> </div> </body> </html> ``` 问题：直接看效果图    就是个这个问题 就是不能再第一页添加直接会覆盖最后一天数据
- bootstrap表格表头固定 身体自动滚动
- 使用bootstrap创建一个表格，表头固定，身体部分自动滚动，页面显示3行数据，共有10行数据。怎么实现？
- 关于Bootstrap dataTable 往表格添加数据的问题
- 本人是小白一个 想载页面加载时通过ajax查询数据库中的信息添加到表格中，但是dataTable的配置网上查了一大堆也没看明白，想请教下各位大牛。 这是前端的代码： <div class="page-header"> <h4> 行政门户 <small> <i class="icon-double-angle-right"></i> 查看 </small> </h4> </div><!-- /.page-header --> <div class="row"> <div class="col-xs-12"> <div class="table-header"> 员工信息表 </div> <div class="table-responsive"> <table id="sample-table-2" class="table table-striped table-bordered table-hover"> <thead> <tr> <th class="center"> <label> <input type="checkbox" class="ace" /> <span class="lbl"></span> </label> </th> <th id="th"> 姓名 </th> <th> 部门 </th> <th> 职务 </th> <th> 分机号 </th> <th> 联系电话 </th> <th> 邮箱账号 </th> <th> 入职时间 </th> <th> 工作地点 </th> <th> 员工状态 </th> <th></th> </tr> </thead> <tbody > </tbody> //这里用来添加数据库的数据，与列一一对应 这里是js代码： //有大牛可以分析下配置怎么写吗 var datatables = $('#sample-table-2').dataTable( { "sAjaxSource":'http://localhost:8080/clientManager2/getEmployee.do', "aoColumns": [ { "bSortable": false }, null,null,null,null,null,null,null,null,null, { "bSortable": false } ] } ); 这是 后台代码： @RequestMapping(value="/getEmployee",method = RequestMethod.GET) public @ResponseBody List<Employee> getEmployee(){ List<Employee> list = employeeService.getEmployee(); return list; } 有大神可以救救小白我吗？（为了这个问题新注册的账号......暂时没有C币）
- bootstrap 表格添加了滚动条以后，如何给滚动条和滚动区域添加颜色
- <div style="overflow:scroll;overflow-y: hidden; width: 60%; height:50%;" class="scrolll"> <table class="table table-bordered"> <tr> <td>序号</td> <td>设备编码</td> <td>设备名称</td> </tr> </table> </div
- BootStrap的glyphicons字体图标问题
- BootStrap的glyphicons字体图标一部分解码正确，一部分解码错误是为什么？（肯定排除了字体文件的路径问题） 下图是我用浏览器查看CSS的结果，很明显content是一个正方形的就是解码错误的部分，请问有谁知道是为什么吗？怎么解决呢？ 
- php bootstrap表格插件 数据多了之后加载很慢
- 我是现实一万多条数据 显示 每页十个 表格分页加载的时候 好像是每次都是重新请求的 有什么好的解决方法
- bootstrap 表格append多行后，没有垂直滚动条
- 我再用bootstrap的样式做了一个table，然后用jQuery 向该table中append行元素， 当append的元素较多时，按理讲应该有个滚动条的，可是却没有滚动条，哪位大神知道解决办法的啊，求指点！
- BootStrap中的图标怎么引用 Glyphicons下面的图标啊
- BootStrap自带的图标太少了 想用其他的图标怎么办？
- bootstrap表格获取数据合并单元格问题
-  空白部分都是从后台获取的数据，但有列是固定文字，第一列合并单元格，请问如何实现？拜托各位大神了。
- bootstrap table 不刷新表格
-  如上图：我做了一 个新增行和删除行，当我填写前面几行数据后，点击新增行会清空我前 面填写的数据， bootstrap table有什么办法不刷新表格内的内容？
- bootstrap -table工具栏图标显示大小问题
- 
- bootstrap table表格为什么显示不出数据
- 我是用bootstrap table来制作表格的，用js创建的方法，现在后台已经有返回json数据了。但是显示不到表格里面，返回json数据的标题和field也是一样的，就是显示不出来，以前用easyui的话，有个loadFilter来显示数据，bootstrap有这种方法吗？还是直接显示呢？？
- Bootstrap table 自动切换表格视图与卡片视图
- 新手小白，想请教大家一个问题，描述如下： 我使用Bootstrap Table，我想要在分辨率足以显示表格的时候显示表格内容，如果我浏览器缩小了或者在分辨率较小的显示器上，我想以卡片视图的形式显示表格内容，请问有什么方法可以做到啊？用js判断么？ 请大家不要吝啬自己的答案，帮帮忙，谢谢~！
- bootstrap datatable 实现复杂表格数据类型
- 使用bootstrap中datatable实现复杂表格类型的数据填充，比如一行数据中，某一列是3行数据。这种改如何实现，请大神指教！！！
- bootstrap怎么加载表格，怎么让他显示，页面的代码怎么写
- bootstrap怎么加载表格，怎么让他显示，页面的代码怎么写
- 有关 bootstrap table 插件中的问题
- 我想问一下各位大佬 那个 我在bootstrap中的标签页下想要放置一个表格 想要实现点击不同的标签显示不同的表格数据，表格使用了bootstrap table 插件，使用的时候发现表格全部都堆叠在一起了，切换标签也没有反应了， 希望大家给一个解决办法，谢谢 
- bootstrap如何设置在文本框后边添加 *
- 使用的是bootstrap ，如何在一组输入框的后边添加 *,便添加备注表明为必填项
- bootstrap-fileinput一些图标不显示
-  我从github下载的bootstrap-fileinput源码，不知道为什么，一些图标显示不出来，求大师指导或者给我一套能显示的源码
- bootstrap-table如何设置首行变色，其他行不变色
- bootstrap-table如何设置首行变色，其他行不变色
- 终于明白阿里百度这样的大公司，为什么面试经常拿ThreadLocal考验求职者了
- 点击上面↑「爱开发」关注我们每晚10点，捕获技术思考和创业资源洞察什么是ThreadLocalThreadLocal是一个本地线程副本变量工具类，各个线程都拥有一份线程私...
- 《奇巧淫技》系列-python！！每天早上八点自动发送天气预报邮件到QQ邮箱
- 将代码部署服务器，每日早上定时获取到天气数据，并发送到邮箱。 也可以说是一个小人工智障。 思路可以运用在不同地方，主要介绍的是思路。
- 加快推动区块链技术和产业创新发展，2019可信区块链峰会在京召开
- 11月8日，由中国信息通信研究院、中国通信标准化协会、中国互联网协会、可信区块链推进计划联合主办，科技行者协办的2019可信区块链峰会将在北京悠唐皇冠假日酒店开幕。 区块链技术被认为是继蒸汽机、电力、互联网之后，下一代颠覆性的核心技术。如果说蒸汽机释放了人类的生产力，电力解决了人类基本的生活需求，互联网彻底改变了信息传递的方式，区块链作为构造信任的技术有重要的价值。 1...
- 阿里面试官问我：如何设计秒杀系统？我的回答让他比起大拇指
- 你知道的越多，你不知道的越多 点赞再看，养成习惯 GitHub上已经开源 https://github.com/JavaFamily 有一线大厂面试点脑图和个人联系方式，欢迎Star和指教 前言 Redis在互联网技术存储方面使用如此广泛，几乎所有的后端技术面试官都要在Redis的使用和原理方面对小伙伴们进行360°的刁难。 作为一个在互联网公司面一次拿一次Offer的面霸，打败了...
- C语言魔塔游戏
- 很早就很想写这个，今天终于写完了。 游戏截图： 编译环境: VS2017 游戏需要一些图片，如果有想要的或者对游戏有什么看法的可以加我的QQ 2985486630 讨论，如果暂时没有回应，可以在博客下方留言，到时候我会看到。 下面我来介绍一下游戏的主要功能和实现方式 首先是玩家的定义，使用结构体，这个名字是可以自己改变的 struct gamerole { char n...
- 面试官问我：什么是消息队列？什么场景需要他？用了会出现什么问题？
- 你知道的越多，你不知道的越多 点赞再看，养成习惯 GitHub上已经开源 https://github.com/JavaFamily 有一线大厂面试点脑图、个人联系方式和人才交流群，欢迎Star和完善 前言 消息队列在互联网技术存储方面使用如此广泛，几乎所有的后端技术面试官都要在消息队列的使用和原理方面对小伙伴们进行360°的刁难。 作为一个在互联网公司面一次拿一次Offer的面霸...
- Android性能优化(4)：UI渲染机制以及优化
- 文章目录1. 渲染机制分析1.1 渲染机制1.2 卡顿现象1.3 内存抖动2. 渲染优化方式2.1 过度绘制优化2.1.1 Show GPU overdraw2.1.2 Profile GPU Rendering2.2 卡顿优化2.2.1 SysTrace2.2.2 TraceView 在从Android 6.0源码的角度剖析View的绘制原理一文中，我们了解到View的绘制流程有三个步骤，即m...
- 微服务中的Kafka与Micronaut
- 今天，我们将通过Apache Kafka主题构建一些彼此异步通信的微服务。我们使用Micronaut框架，它为与Kafka集成提供专门的库。让我们简要介绍一下示例系统的体系结构。我们有四个微型服务：订单服务，行程服务，司机服务和乘客服务。这些应用程序的实现非常简单。它们都有内存存储，并连接到同一个Kafka实例。 我们系统的主要目标是为客户安排行程。订单服务应用程序还充当网关。它接收来自客户的请求...
- 致 Python 初学者们！
- 作者| 许向武 责编 | 屠敏 出品 | CSDN 博客 前言 在 Python 进阶的过程中，相信很多同学应该大致上学习了很多 Python 的基础知识，也正在努力成长。在此期间，一定遇到了很多的困惑，对未来的学习方向感到迷茫。我非常理解你们所面临的处境。我从2007年开始接触 Python 这门编程语言，从2009年开始单一使用 Python 应对所有的开发工作，直至今...
- 究竟你适不适合买Mac？
- 我清晰的记得，刚买的macbook pro回到家，开机后第一件事情，就是上了淘宝网，花了500元钱，找了一个上门维修电脑的师傅，上门给我装了一个windows系统。。。。。。 表砍我。。。 当时买mac的初衷，只是想要个固态硬盘的笔记本，用来运行一些复杂的扑克软件。而看了当时所有的SSD笔记本后，最终决定，还是买个好（xiong）看（da）的。 已经有好几个朋友问我mba怎么样了，所以今天尽量客观...
- 程序员一般通过什么途径接私活？
- 二哥，你好，我想知道一般程序猿都如何接私活，我也想接，能告诉我一些方法吗？ 上面是一个读者“烦不烦”问我的一个问题。其实不止是“烦不烦”，还有很多读者问过我类似这样的问题。 我接的私活不算多，挣到的钱也没有多少，加起来不到 20W。说实话，这个数目说出来我是有点心虚的，毕竟太少了，大家轻喷。但我想，恰好配得上“一般程序员”这个称号啊。毕竟苍蝇再小也是肉，我也算是有经验的人了。 唾弃接私活、做外...
- 字节跳动面试官这样问消息队列：分布式事务、重复消费、顺序消费，我整理了一下
- 你知道的越多，你不知道的越多 点赞再看，养成习惯 GitHub上已经开源 https://github.com/JavaFamily 有一线大厂面试点脑图、个人联系方式和人才交流群，欢迎Star和完善 前言 消息队列在互联网技术存储方面使用如此广泛，几乎所有的后端技术面试官都要在消息队列的使用和原理方面对小伙伴们进行360°的刁难。 作为一个在互联网公司面一次拿一次Offer的面霸...
- Python爬虫爬取淘宝，京东商品信息
- 小编是一个理科生，不善长说一些废话。简单介绍下原理然后直接上代码。 使用的工具（Python+pycharm2019.3+selenium+xpath+chromedriver）其中要使用pycharm也可以私聊我selenium是一个框架可以通过pip下载 pip installselenium -ihttps://pypi.tuna.tsinghua.edu.cn/simple/ ...
- 阿里程序员写了一个新手都写不出的低级bug，被骂惨了。
- 这种新手都不会范的错，居然被一个工作好几年的小伙子写出来，差点被当场开除了。
- Java工作4年来应聘要16K最后没要,细节如下。。。
- 前奏： 今天2B哥和大家分享一位前几天面试的一位应聘者，工作4年26岁，统招本科。 以下就是他的简历和面试情况。 基本情况： 专业技能： 1、 熟悉Sping了解SpringMVC、SpringBoot、Mybatis等框架、了解SpringCloud微服务 2、 熟悉常用项目管理工具：SVN、GIT、MAVEN、Jenkins 3、 熟悉Nginx、tomca...
- SpringBoot2.x系列教程（三十六）SpringBoot之Tomcat配置
- Spring Boot默认内嵌的Tomcat为Servlet容器，关于Tomcat的所有属性都在ServerProperties配置类中。同时，也可以实现一些接口来自定义内嵌Servlet容器和内嵌Tomcat等的配置。 关于此配置，网络上有大量的资料，但都是基于SpringBoot1.5.x版本，并不适合当前最新版本。本文将带大家了解一下最新版本的使用。 ServerProperties的部分源...
- Python绘图，圣诞树，花，爱心 | Turtle篇
- 每周每日，分享Python实战代码，入门资料，进阶资料，基础语法，爬虫，数据分析，web网站，机器学习，深度学习等等。 公众号回复【进群】沟通交流吧，QQ扫码进群学习吧 微信群 QQ群 1.画圣诞树 import turtle screen = turtle.Screen() screen.setup(800,600) circle = turtle.Turtle()...
- 作为一个程序员，CPU的这些硬核知识你必须会！
- CPU对每个程序员来说，是个既熟悉又陌生的东西？ 如果你只知道CPU是中央处理器的话，那可能对你并没有什么用，那么作为程序员的我们，必须要搞懂的就是CPU这家伙是如何运行的，尤其要搞懂它里面的寄存器是怎么一回事，因为这将让你从底层明白程序的运行机制。 随我一起，来好好认识下CPU这货吧 把CPU掰开来看 对于CPU来说，我们首先就要搞明白它是怎么回事，也就是它的内部构造，当然，CPU那么牛的一个东...
- 破14亿，Python分析我国存在哪些人口危机！
- 一、背景 二、爬取数据 三、数据分析 1、总人口 2、男女人口比例 3、人口城镇化 4、人口增长率 5、人口老化（抚养比） 6、各省人口 7、世界人口 四、遇到的问题 遇到的问题 1、数据分页，需要获取从1949-2018年数据，观察到有近20年参数：LAST20，由此推测获取近70年的参数可设置为：LAST70 2、2019年数据没有放上去，可以手动添加上去 3、将数据进行 行列转换 4、列名...
- 听说想当黑客的都玩过这个Monyer游戏（1~14攻略）
- 第零关 进入传送门开始第0关（游戏链接） 请点击链接进入第1关： 连接在左边→ ←连接在右边 看不到啊。。。。（只能看到一堆大佬做完的留名，也能看到菜鸡的我，在后面~~） 直接fn+f12吧 <span>连接在左边→</span> <a href="first.php"></a> <span>←连接在右边</span> o...
- 在家远程办公效率低？那你一定要收好这个「在家办公」神器！
- 相信大家都已经收到国务院延长春节假期的消息，接下来，在家远程办公可能将会持续一段时间。 但是问题来了。远程办公不是人在电脑前就当坐班了，相反，对于沟通效率，文件协作，以及信息安全都有着极高的要求。有着非常多的挑战，比如： 1在异地互相不见面的会议上，如何提高沟通效率？ 2文件之间的来往反馈如何做到及时性？如何保证信息安全？ 3如何规划安排每天工作，以及如何进行成果验收？ ...... ...
- 作为一个程序员，内存和磁盘的这些事情，你不得不知道啊！！！
- 截止目前，我已经分享了如下几篇文章： 一个程序在计算机中是如何运行的？超级干货！！！ 作为一个程序员，CPU的这些硬核知识你必须会！ 作为一个程序员，内存的这些硬核知识你必须懂！ 这些知识可以说是我们之前都不太重视的基础知识，可能大家在上大学的时候都学习过了，但是嘞，当时由于老师讲解的没那么有趣，又加上这些知识本身就比较枯燥，所以嘞，大家当初几乎等于没学。 再说啦，学习这些，也看不出来有什么用啊！...
- 这个世界上人真的分三六九等，你信吗？
- 偶然间，在知乎上看到一个问题 一时间，勾起了我深深的回忆。 以前在厂里打过两次工，做过家教，干过辅导班，做过中介。零下几度的晚上，贴过广告，满脸、满手地长冻疮。 再回首那段岁月，虽然苦，但让我学会了坚持和忍耐。让我明白了，在这个世界上，无论环境多么的恶劣，只要心存希望，星星之火，亦可燎原。 下文是原回答，希望能对你能有所启发。 如果我说，这个世界上人真的分三六九等，...
- 2020年全新Java学习路线图，含配套视频，学完即为中级Java程序员！！
- 新的一年来临，突如其来的疫情打破了平静的生活！ 在家的你是否很无聊，如果无聊就来学习吧！ 世上只有一种投资只赚不赔，那就是学习！！！ 传智播客于2020年升级了Java学习线路图，硬核升级，免费放送！ 学完你就是中级程序员，能更快一步找到工作！ 一、Java基础 JavaSE基础是Java中级程序员的起点，是帮助你从小白到懂得编程的必经之路。 在Java基础板块中有6个子模块的学...
- B 站上有哪些很好的学习资源?
- 哇说起B站，在小九眼里就是宝藏般的存在，放年假宅在家时一天刷6、7个小时不在话下，更别提今年的跨年晚会，我简直是跪着看完的！！ 最早大家聚在在B站是为了追番，再后来我在上面刷欧美新歌和漂亮小姐姐的舞蹈视频，最近两年我和周围的朋友们已经把B站当作学习教室了，而且学习成本还免费，真是个励志的好平台ヽ(.◕ฺˇд ˇ◕ฺ;)ﾉ 下面我们就来盘点一下B站上优质的学习资源： 综合类 Oeasy： 综合...
- 爬取薅羊毛网站百度云资源
- 这是疫情期间无聊做的爬虫， 去获取暂时用不上的教程 import threading import time import pandas as pd import requests import re from threading import Thread, Lock # import urllib.request as request # req=urllib.request.Requ...
- 如何优雅地打印一个Java对象？
- 你好呀，我是沉默王二，一个和黄家驹一样身高，和刘德华一样颜值的程序员。虽然已经写了十多年的 Java 代码，但仍然觉得自己是个菜鸟（请允许我惭愧一下）。 在一个月黑风高的夜晚，我思前想后，觉得再也不能这么蹉跎下去了。于是痛下决心，准备通过输出的方式倒逼输入，以此来修炼自己的内功，从而进阶成为一名真正意义上的大神。与此同时，希望这些文章能够帮助到更多的读者，让大家在学习的路上不再寂寞、空虚和冷。 ...
- 雷火神山直播超两亿，Web播放器事件监听是怎么实现的？
- Web播放器解决了在手机浏览器和PC浏览器上播放音视频数据的问题，让视音频内容可以不依赖用户安装App，就能进行播放以及在社交平台进行传播。在视频业务大数据平台中，播放数据的统计分析非常重要，所以Web播放器在使用过程中，需要对其内部的数据进行收集并上报至服务端，此时，就需要对发生在其内部的一些播放行为进行事件监听。 那么Web播放器事件监听是怎么实现的呢？ 01 监听事件明细表 名...
- 3万字总结，Mysql优化之精髓
- 本文知识点较多，篇幅较长，请耐心学习 MySQL已经成为时下关系型数据库产品的中坚力量，备受互联网大厂的青睐，出门面试想进BAT，想拿高工资，不会点MySQL优化知识，拿offer的成功率会大大下降。 为什么要优化 系统的吞吐量瓶颈往往出现在数据库的访问速度上 随着应用程序的运行，数据库的中的数据会越来越多，处理时间会相应变慢 数据是存放在磁盘上的，读写速度无法和内存相比 如何优化 设计...
- HTML5适合的情人节礼物有纪念日期功能
- 前言 利用HTML5，css，js实现爱心树 以及 纪念日期的功能 网页有播放音乐功能 以及打字倾诉感情的画面，非常适合情人节送给女朋友 具体的HTML代码 具体只要修改代码里面的男某某和女某某 文字段也可自行修改，还有代码下半部分的JS代码需要修改一下起始日期 注意月份为0~11月 也就是月份需要减一。 当然只有一部分HTML和JS代码不够运行的，文章最下面还附加了完整代码的下载地址 <!...
