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 相关文章推荐
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 Javascript
Jquery刷新页面背景图片随机变换的实现方法
Mar 15 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
RequireJS入门一之实现第一个例子
Sep 30 Javascript
基于jquery实现轮播特效
Apr 22 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 Javascript
JavaScript 是什么意思
Sep 22 Javascript
canvas实现刮刮卡效果
Mar 14 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
Sep 23 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
模仿OSO的论坛(二)
2006/10/09 PHP
PHP file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
php ss7.5的数据调用 (笔记)
2010/03/08 PHP
php表单处理操作
2017/11/16 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
javascript prototype原型操作笔记
2009/12/07 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
pycharm 使用心得(六)进行简单的数据库管理
2014/06/06 Python
python实现telnet客户端的方法
2015/04/15 Python
Python3读取文件常用方法实例分析
2015/05/22 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
python通过nmap扫描在线设备并尝试AAA登录(实例代码)
2019/12/30 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
Python内置异常类型全面汇总
2020/05/28 Python
django 将自带的数据库sqlite3改成mysql实例
2020/07/09 Python
python 实现的IP 存活扫描脚本
2020/12/10 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
培训主管的岗位职责
2013/11/23 职场文书
服装行业创业计划书范文
2014/02/05 职场文书
实习单位评语
2014/04/26 职场文书
生态养殖创业计划书
2014/05/06 职场文书
企业文化标语大全
2014/06/10 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers
vue基于Teleport实现Modal组件
2021/05/31 Vue.js
Python代码风格与编程习惯重要吗?
2021/06/03 Python
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技