JavaScript动态设置table的高度

这两天在调测系统的兼容性时遇到一个设置table高度的问题，页面功能很简单，就是页面中央一个文件，文件下方有一个保存按钮，文件内可以点击“添加项目按钮”来在该文件内增加表格数（这就意味着文件的高度随时可能发生变化）。现在的问题是IE显示正常，但是chrome中保存按钮框始终出现在文件的中央（真想偷懒设置一个定死的高度，呵呵，1365px，不要问我怎么知道，我没有这么想过~_~）。

最简单的动态设置table高度很容易实现，动态获取当前文件的高度然后赋值给保存按钮就可以了。

function com_onresize(){//clientHeight的值由DIV内容的实际高度和CSS中的padding值决定，//而offsetHeight的值由DIV内容的实际高度，CSS中的padding值，scrollbar的高度和DIV的border值决定；//至于CSS中的margin值，则不会影响 clientHeight和offsetHeight的值var contentsHeight = document.body.clientHeight;var buttonsHeight = document.getElementById( "buttons" ).offsetHeight;var head1Height = document.getElementById( "head1" ).offsetHeight;var head2Height = document.getElementById( "head2" ).offsetHeight;var h = contentsHeight - buttonsHeight - head1Height - head2Height - 13;if(h < 110){return;}//设置table的行高document.getElementById( "TableContainer1" ).style.height = h/2 + 'px';document.getElementById( "TableContainer2" ).style.height = h/2 + 'px';}function com_sbs_pagesize(){//window.screen.availWidth     返回当前屏幕宽度(空白空间) //window.screen.availHeight     返回当前屏幕高度(空白空间) //window.screen.width     返回当前屏幕宽度(分辨率值) //window.screen.height     返回当前屏幕高度(分辨率值) //window.document.body.offsetHeight;     返回当前网页高度 //window.document.body.offsetWidth;     返回当前网页宽度 var screenHeight = window.screen.height;var availHeight = window.screen.availHeight;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;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(width,height)方法用于把窗口大小调整为指定的宽度和高度window.resizeTo(document.body.offsetWidth,mainH + tableHeight*2);}

但是问题是我来改这个bug的时候发现这个文件被分成了多个div多个table，前台页面写的好乱！而且当我去尝试使用JS脚本给TR的style.height属性赋值，这个高度设定并不能表现出来，上网搜了一下，别人是这样回答的：

确实在Chrome，使用JS脚本给TR的style.height属性赋值，不能表现出来。愚以为，TR元素只是容纳定位TD元素的容器，它本身并没有外观。给TR的height赋值，是把其height属性传递给了其中的TD。使用JS赋值的时候，IE和FF都把值传递给了TD，Chrome要么是没有给TD传递这个值，要么传递了没有表现出来。我认为前者可能性比较大。

然后我又查了一下W3C里面<tr>和<td>的属性

<tr>标签的可选属性

<td>标签的可选属性

问题就显而易见了。

附录：

网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;

scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值

offsetParent.scrollTop 表示上层定位容器滚动了多少高度

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量；

要获取当前页面的滚动条纵坐标位置，用：
document.documentElement.scrollTop;而不是：document.body.scrollTop;

documentElement 对应的是 html 标签，而 body 对应的是 body 标签

document.body.scrollWidth很好理解, 就页面不带右边滚动条的长度。

document.body.scrollHeight指页面的总高度，当前一屏显示高度再加上纵向滚动条滚动到底的高度

document.documentElement.scrollTop和document.body.scrollTop涉及到chrome浏览器的兼容性问题：

当页面加入DTD标示后 document.documentElement.scrollTop的值在IE和FF下正常，但document.body.scrollTop一直为0。在Chrome下就反过来了；

最后编辑时间：2016-03-22

JavaScript动态设置table的高度相关推荐

【Javascript】Javascript动态设置页面高度
1.动态设置父页面iframe高度 <body onload="iframeHeight()"><script type="text/javascrip ...
按照文字内容动态设置TableViewCell的高度
最近再做个项目需要使用UITableView来显示评论列表,但是有的评论字数特别多,固定的Cell高度显示不完,只能动态地根据字数来设置Cell的高度了只要实现UITableViewDelegate ...
javascript动态创建table
function createTable(parentNode,headres,datas){//创建表格var table = document.createElement("table& ...
android 动态设置View的高度和宽度，ViewTreeObserver使用
private int mMonitorHeight = 0; private int mMonitorWidth = 0; private boolean bisSetScreen = false; ...
javascript 动态设置样式style
动态修改style 1.易错:修改元素的样式不是设置class属性,而是className属性. 2.易错:单独修改样式的属性使用"style.属性名".注意在css中属性名在ja ...
微信小程序-动态设置图片的高度
1.在index.wxml文件中:给图片绑定一个图片加载完成的方法: <image bindload="onImageLoad" class="img" ...
uni-app 动态设置 swiper 的高度
开发中遇到两种需要动态设置 swiper 高度的情况: 1. 第一种,需要除开顶部或底部元素获取屏幕剩余高度. 如果顶部或底部元素高度固定,直接使用 calc 函数来计算: 如果高度不固定,通过 un ...
vue动态设置table列的显示与隐藏并且可以随意拖地排序(element-ui或Antd-ui )
最终效果如下页面只需要设置两个参数(适用于element及antd) columnSetting // 是否显示列设置按钮 // name="TtableColumnSet" / ...
vue 动态设置div的高度_Vue 动态设置元素高度
1. Vue文件如下 let windowHeight = parseInt(window.innerHeight) export default { data() { return { window ...

JavaScript动态设置table的高度

附录：

JavaScript动态设置table的高度相关推荐

最新文章

热门文章