js style动态设置table高度


Posted in Javascript onOctober 21, 2014

直接在table标签中设置下不就行了吗?这是静态的,如果要动态设置你会吗?

function com_onresize(){

var contentsHeight = document.body.clientHeight;
var buttonsHeight = document.getElementById( "buttons" ).offsetHeight;
var head1Height = document.getElementById( "head1" ).offsetHeight;
var head2Height = document.getElementById( "head2" ).offsetHeight;

var t1 = document.getElementById( "TableContainer1" ).style.height;
var t2 = document.getElementById( "TableContainer2" ).style.height;

//alert(document.getElementById( "TableContainer1" ).style.height);
var h = contentsHeight - buttonsHeight - head1Height - head2Height - 13;
if(h < 110){
return;
}
document.getElementById( "TableContainer1" ).style.height = h/2 + 'px';
document.getElementById( "TableContainer2" ).style.height = h/2 + 'px';
}
function com_sbs_pagesize(){
var screenHeight = window.screen.height;
  var availHeight = window.screen.availHeight;
  //alert(document.getElementById( "TableContainer1" ).children[0].rows.length);
  var index = document.getElementById( "TableContainer1" ).children[0].rows.length
  var buttonsHeight = document.getElementById( "buttons" ).offsetHeight;
var head1Height = document.getElementById( "head1" ).offsetHeight;
var head2Height = document.getElementById( "head2" ).offsetHeight;

  var mainH = buttonsHeight + head1Height +head2Height + 13;
  //20:scroll 35:title 25:tr
  while ((availHeight-mainH) < (20 + 35 + 25*index)*2)
{
 index = index - 1;
}
var tableHeight = 20 + 35 + 25*index;
  document.getElementById( "TableContainer1" ).style.height = tableHeight + 'px';
  document.getElementById( "TableContainer2" ).style.height = tableHeight + 'px';
  window.resizeTo(document.body.offsetWidth,mainH + tableHeight*2);
}
Javascript 相关文章推荐
jquery form 隐藏的input 选择
Apr 29 Javascript
jQuery晃动层特效实现方法
Mar 09 Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 Javascript
小程序实现自定义导航栏适配完美版
Apr 02 Javascript
vue store之状态管理模式的详细介绍
Jun 13 Javascript
vue-devtools的安装和使用步骤详解
Oct 17 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
Dec 01 Javascript
Vue 组件的挂载与父子组件的传值实例
Sep 02 Javascript
js读写json文件实例代码
Oct 21 #Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 #Javascript
javascript Deferred和递归次数限制实例
Oct 21 #Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
Oct 21 #Javascript
jquery中post方法用法实例
Oct 21 #Javascript
js调试工具Console命令详解
Oct 21 #Javascript
JS中FRAME的操作问题实例分析
Oct 21 #Javascript
You might like
学习php设计模式 php实现适配器模式
2015/12/07 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
js获取时间(本周、本季度、本月..)
2013/11/22 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
Bootstrap的Refresh Icon也spin起来
2016/07/13 Javascript
js封装tab标签页实例分享
2016/12/19 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
2017/02/08 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
详解Python发送email的三种方式
2018/10/18 Python
pandas去除重复列的实现方法
2019/01/29 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
Collection和Collections的区别
2016/05/02 面试题
医药专业应届毕业生求职信范文
2014/01/01 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
驻村工作先进事迹
2014/08/14 职场文书
研究生导师推荐信
2014/09/06 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
法人身份证明书
2014/10/08 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
教务处干事工作总结
2015/08/14 职场文书
解决python存数据库速度太慢的问题
2021/04/23 Python
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python