BootStrap中Table隐藏后显示问题的实现代码
时间:2019-03-31
本文章向大家介绍BootStrap中Table隐藏后显示问题的实现代码,主要包括BootStrap中Table隐藏后显示问题的实现代码使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
开始的时候先把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" }); }
出现如下的错误显示:
经过查找分析,只需要将上面代码中标红的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隐藏后显示问题的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- Enterprise Library Policy Injection Application Block 之一: PIAB Overview
- Python教学——第七天
- 大数据将带来电视媒体生态式变革!大数据如何深度融合电视媒体?
- Silverlight SEO优化
- Silverlight性能优化
- WCF后续之旅(6): 通过WCF Extension实现Context信息的传递
- WCF后续之旅(6): 通过WCF Extension实现Context信息的传递
- 理性的相亲方法!精品课:《决策树》
- Asp.Net无刷新分页( jquery.pagination.js)
- 为什么网站需要用CDN来加速?
- Jmeter常用获取数据的几种方式
- [Silverlight 4 RC]RichTextBox概览
- WCF后续之旅(4):WCF Extension Point 概览
- Asp.Net无刷新上传并裁剪头像
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- android使用flutter的ListView实现滚动列表的示例代码
- 实验7 3D机器人
- EasyValidate优雅地校验提交数据完整性
- 实验8 OpenGL太阳系动画
- Django实现列表页商品数据返回教程
- 实验9 OpenGL光照
- Python实现多线程下载脚本的示例代码
- Android自定义控件仿iOS滑块SwitchButton
- kotlin gson反序列化默认值失效深入讲解
- Android使用Volley实现上传文件功能
- 工作中使用jasmine遇到的一个html element和Component绑定属性失去同步的问题
- Android使用Volley框架定制PostUploadRequest上传文件
- Android实现横向滑动卡片效果
- 在jasmine beforeEach里修改UI元素的一个side effect
- Android实现头像上传功能