jQuery控制表格垂直滚动条

表格table水平自适应，可以设置宽度100%
表格table垂直自适应，需要设置表格的高度，根据高度，表格的垂直滚动条会自动的显示和隐藏
垂直滚动条，需要设置指定的高度，当table的高度超过这个高度时，就会出现垂直滚动条
页面的元素都是分块的，tab、search、title、button、table等模块，页面和页面上的元素也是不一样的，需要jQuery获取高度

// 页面初始化
$(function () {var webHeight = window.innerHeight;var tabHeight = $('.tabStyle').innerHeight();var searchHeight = $('.searchStyle').innerHeight();var titleHeight = $('.toolTitleStyle').innerHeight();var toolHeight = $('.toolStyle').innerHeight();var pageHeight = $('.pagefooterStyle').innerHeight();if (tabHeight == null) {tabHeight = 0;}if (searchHeight == null) {searchHeight = 0;}if (titleHeight == null) {titleHeight = 0;}if (toolHeight == null) {toolHeight = 0;}if (pageHeight == null) {pageHeight = 0;}var height = webHeight - tabHeight - searchHeight - titleHeight - toolHeight - pageHeight - 8;var table = $('.listTableStyle');if (table != null) {$('.listTableStyle').css("height", height);}
});// 浏览器改变大小
$(window).resize(function () {var webHeight = window.innerHeight;var tabHeight = $('.tabStyle').innerHeight();var searchHeight = $('.searchStyle').innerHeight();var titleHeight = $('.toolTitleStyle').innerHeight();var toolHeight = $('.toolStyle').innerHeight();var pageHeight = $('.pagefooterStyle').innerHeight();if (tabHeight == null) {tabHeight = 0;}if (searchHeight == null) {searchHeight = 0;}if (titleHeight == null) {titleHeight = 0;}if (toolHeight == null) {toolHeight = 0;}if (pageHeight == null) {pageHeight = 0;}var height = webHeight - tabHeight - searchHeight - titleHeight - toolHeight - pageHeight - 8;var table = $('.listTableStyle');if (table != null) {$('.listTableStyle').css("height", height);}
});

jQuery控制表格垂直滚动条相关推荐

Jquery控制滚动Div 滚动条事件
$('#classifyTree').bind('mousewheel', function(event) {var realScrollHeight=event.currentTarget.clie ...
jqGrid 如何shrinkToFit出现水平滚动条及页面有垂直滚动条时表格会超出父容器处理
1.下图右侧为表格超出panel部分页面html代码: <!DOCTYPE html> <html> <head><meta charset="U ...
解决boostrap-table有水平和垂直滚动条时，滚动条滑到最右边表格标题和内容单元格无法对齐的问题
解决boostrap-table有水平和垂直滚动条时,滚动条滑到最右边表格标题和内容单元格无法对齐的问题参考文章: (1)解决boostrap-table有水平和垂直滚动条时,滚动条滑到最右边表格标 ...
Jquery控制div滚动，但不显示滚动条
Jquery控制div滚动,但不显示滚动条 Html代码: <div class="dv_phone_pic"> <div class="prew_bo ...
html table水平和垂直滚动条,Ajax: Excel风格的HTML Table输入控件[二]：外部表格与水平垂直滚动条...
实际效果: [url]http://www.weiqihome.com/scotttable.jsp[/url] 前一节介绍了内部表格的区域划分与区域标识,这一节介绍外部表格. 外部表格的作用是提供 ...
设计一个Windows窗体程序，设置程序，其运行结果如下图所示。垂直滚动条控制字体大小。
设计一个Windows窗体程序,设置程序,其运行结果如下图所示.一个标签控件的Text属性为"缩放"两个字,它的字体大小取决于垂直滚动条的值(Maximum=72,Minimum= ...
JQuery 操作表格和JqGrid了解
登录 | 注册 mike_caoyong的专栏目录视图摘要视图订阅 CSDN日报20170322--<关于软件研发的一些体会总结> 同步博客至 CSDN ,让更多开发者看到你的 ...
jquery 让div添加滚动条？
div 添加滚动条只需要指定 overflow 属性为 auto 即可. 以下实例设置了 div 水平滚动条: 实例 <div style="height:300px;width:70 ...
easyui tabs 使用iframe 出现两个垂直滚动条解决方法
最近在使用easyui-tabs加iframe时,出现了两个垂直滚动条的现象,如下图所示前端代码如下: <div id="infoDlg" class="easy ...

jQuery控制表格垂直滚动条

jQuery控制表格垂直滚动条相关推荐

最新文章

热门文章