js style动态设置table高度_JavaScript

js style动态设置table高度

2021-04-06 16:04JS教程网 JavaScript

设置table高度想必大家都会，直接在table标签中设置下不就行了吗？这是静态的，如果要动态设置你会吗？下面的实例将教会大家

直接在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);

									}