BootStrap中Table隐藏后显示问题的实现代码


Posted in Javascript onAugust 31, 2017

开始的时候先把table隐藏了,由于判断条件让它显示,结果出现错位的问题。

//前台代码:
<h3 id="faultanalysis-head" class="text-center" style="display:none"><strong>faultanalysis-table</strong></h3> 
<table id="faultanalysis-table" data-height="300" style="display:none"></table> 
//后台代码:
if (resp.data.gch_faultanalysis.length!=0) { 
     console.log("gch_faultanalysis不为空!"); 
     element.find("#faultanalysis-head").css("display","block"); 
     element.find("#faultanalysis-table").css("display","<span style="color:#ff0000;">block</span>"); 
     element.find("#faultanalysis-table").bootstrapTable({ 
      columns:resp.data.faultanalysisVar, 
      pagination:"true", 
      //sidePagination:"client", 
      search:"true", 
      clickToSelect: true, 
      data: resp.data.gch_faultanalysis, 
      singleSelect:"true", 
      showColumns:"false", 
      showRefresh:"true", 
      showToggle:"true", 
      maintainSelected:"true", 
      //height:"413" 
     }); 
    }

出现如下的错误显示:

BootStrap中Table隐藏后显示问题的实现代码

经过查找分析,只需要将上面代码中标红的block就好了,而且这个不会对<h>产生影响。修改后代码如下:

//前台代码:
<h3 id="faultanalysis-head" class="text-center" style="display:none"><strong>faultanalysis-table</strong></h3> 
<table id="faultanalysis-table" data-height="300" style="display:none"></table> 
//后台代码:
if (resp.data.gch_faultanalysis.length!=0) { 
     console.log("gch_faultanalysis不为空!"); 
     element.find("#faultanalysis-head").css("display","block"); 
     element.find("#faultanalysis-table").css("display",""); 
     element.find("#faultanalysis-table").bootstrapTable({ 
      columns:resp.data.faultanalysisVar, 
      pagination:"true", 
      //sidePagination:"client", 
      search:"true", 
      clickToSelect: true, 
      data: resp.data.gch_faultanalysis, 
      singleSelect:"true", 
      showColumns:"false", 
      showRefresh:"true", 
      showToggle:"true", 
      maintainSelected:"true", 
      //height:"413" 
     }); 
    }

修改后的截图如下:

BootStrap中Table隐藏后显示问题的实现代码

总结

以上所述是小编给大家介绍的BootStrap中Table隐藏后显示问题的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
javascript中Function类型详解
Apr 28 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
详解Angular CLI + Electron 开发环境搭建
Jul 20 Javascript
react中的ajax封装实例详解
Oct 17 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 Javascript
webpack 静态资源集中输出的方法示例
Nov 09 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 16 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
Sep 16 Javascript
Cpage.js给组件绑定事件的实现代码
Aug 31 #Javascript
基于canvas粒子系统的构建详解
Aug 31 #Javascript
Vue 组件间的样式冲突污染
Aug 31 #Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 #Javascript
JavaScript基础之流程控制语句的用法
Aug 31 #Javascript
jquery操作ul的一些操作笔记整理(干货)
Aug 31 #jQuery
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 #Javascript
You might like
php生成gif动画的方法
2015/11/05 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
javascript[js]获取url参数的代码
2007/10/17 Javascript
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
iScroll中事件点击触发两次解决方案
2015/03/11 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
2016/06/12 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
[03:54]DOTA2英雄梦之声_第06期_昆卡
2014/06/23 DOTA
python封装对象实现时间效果
2020/04/23 Python
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
Python reversed函数及使用方法解析
2020/03/17 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
异常和异常类的概念
2014/09/12 面试题
国税会议欢迎词
2014/01/16 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
《影子》教学反思
2014/02/21 职场文书
土建施工员岗位职责
2014/07/16 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
工厂仓管员岗位职责
2015/04/01 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL