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 相关文章推荐
一段利用WSH获取登录时间的jscript代码
May 11 Javascript
aspx中利用js实现确认删除代码
Jul 22 Javascript
Javascript绝句欣赏 一些经典的js代码
Feb 22 Javascript
javascript中Number对象的toString()方法分析
Dec 20 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
jquery+css实现动感的图片切换效果
Nov 25 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
Ionic3实现图片瀑布流布局
Aug 09 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
详解Vue 换肤方案验证
Aug 28 Javascript
JavaScript阻止事件冒泡的方法
Dec 06 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类分享
2014/02/07 PHP
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
js删除所有的cookie的代码
2010/11/25 Javascript
jQuery基础框架浅入剖析
2012/12/27 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
JavaScript基于原型链的继承
2016/06/22 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
Vue响应式原理详解
2017/04/18 Javascript
nodeJS模块简单用法示例
2018/04/21 NodeJs
element跨分页操作选择详解
2020/06/29 Javascript
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
python操作 hbase 数据的方法
2016/12/18 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
python将字符串转换成json的方法小结
2019/07/09 Python
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
2019/09/17 Python
python爬虫工具例举说明
2020/11/30 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
如何判断计算机可能已经中马
2013/03/22 面试题
后勤人员自我鉴定
2013/10/20 职场文书
最受欢迎的自我评价
2013/12/22 职场文书
五一服装活动方案
2014/01/11 职场文书
会计学专业学生的求职信范文
2014/01/27 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
小学数学教学反思范文
2016/02/16 职场文书
家长必看:义务教育,不得以面试 评测等名义选拔学生
2019/07/09 职场文书
Win11开始菜单添加休眠选项
2022/04/19 数码科技
Redis实现短信验证码登录的示例代码
2022/06/14 Redis