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中arguments对象详解
Oct 22 Javascript
AngularJS入门教程(零):引导程序
Dec 06 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
详解javascript中原始数据类型Null和Undefined
Dec 17 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
Sep 11 Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 Javascript
Node.js API详解之 util模块用法实例分析
May 09 Javascript
js实现特别简单的钟表效果
Sep 14 Javascript
如何在Express4.x中愉快地使用async的方法
Nov 18 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
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
php 获取远程网页内容的函数
2009/09/08 PHP
PHP中输出转义JavaScript代码的实现代码
2011/04/22 PHP
PHP加密函数 Javascript/Js 解密函数
2013/09/23 PHP
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
javascript json 新手入门文档
2009/12/03 Javascript
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
2012/04/12 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
JS不能跨域借助jquery获取IP地址的方法
2014/08/20 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
基于javascript实现动态时钟效果
2020/08/18 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
angularjs实现首页轮播图效果
2017/04/14 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
vue实现移动端悬浮窗效果
2018/12/01 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
对dataframe数据之间求补集的实例详解
2019/01/30 Python
python3对接mysql数据库实例详解
2019/04/30 Python
利用python画出AUC曲线的实例
2020/02/28 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
柯基袜:Corgi Socks
2017/01/26 全球购物
毕业生就业意向书
2014/04/01 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
2014年党员自我剖析材料
2014/10/07 职场文书
分析Java中Map的遍历性能问题
2021/06/26 Java/Android