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 相关文章推荐
JavaScript中清空数组的三种方法分享
Apr 07 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
JQuery radio(单选按钮)操作方法汇总
Apr 15 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
Angular6封装http请求的步骤详解
Aug 13 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 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下统计用户在线时间的一种尝试
2010/08/26 PHP
php 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
2010/07/26 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
python 文件操作删除某行的实例
2017/09/04 Python
python numpy 一维数组转变为多维数组的实例
2018/07/02 Python
python采集微信公众号文章
2018/12/20 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
HTML5对比HTML4的主要改变和改进总结
2016/05/27 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
酒店保安员岗位职责
2014/01/31 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
2015暑假假期总结
2015/07/13 职场文书
教师远程培训心得体会
2016/01/09 职场文书
60句有关成长的名言
2019/09/04 职场文书
Python并发编程实例教程之线程的玩法
2021/06/20 Python
JavaWeb Servlet实现网页登录功能
2021/07/04 Java/Android
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js