js實現動態改變table高度

左右兩個table,各佔頁面的一半,左邊的table“名字”可能會很長,要求名字全部顯示,所以就要折行顯示。但是折行顯示後高度就會變化,要求右邊的table高度和左邊一樣。而且隨着頁面放大縮小table的高度始終一致。

而右邊的table放的是文件名的超鏈接,要求超過五個文件就要顯示滾動條。所以右邊是將table放在了div中,給div固定了高度,加了縱滾動,所以設置兩邊一般高就是讓右邊div的高度隨着左邊table的變化而變化。

<script type="text/javascript">
// 2020/01/08 P-KI-EN-V5-0015 Insert Start
  function tableHeightCheck(tableLeft,tableRight){
    var tLeft = document.getElementById(tableLeft);
    var tRight = document.getElementById(tableRight);
    var lHeight = tLeft.offsetHeight;
    tRight.style.height = lHeight - 31 + 'px';
  } 
  // 頁面放大縮小時高度調整
  window.onresize = function(){
    tableHeightCheck("tableLeft","tableRight");
  }
</script>
<style>
.LstScroll10 {
  height: 113px;
  overflow-y: scroll;
  margin-left: 0px;
  margin-bottom: 10px;
  margin-top: 0px;
  padding: 0px;
  border: 1px solid #FFFFFF;
  background-color: #FFFFFF;
}
.TblWidth {
  width:  100%;
  border: 1px solid #FFFFFF;
  padding: 0px;
  margin: 10px;
  border-collapse: collapse;
  border-spacing: 0px;
}
</style>
<body onload="tableHeightCheck('tableLeft','tableRight');">
<table id="tableLeft" class="TblWidth" style="margin-left:0px; width: 100%;">
    <tr height="30">
      <th style="padding-top:0px;padding-bottom:0px;border-right-width:0px;">表頭</th>
    </tr>
    <tr>
      <td class="CellHead" height="12.5" width="22%" nowrap>1</td>
      <td class="CellHead" height="12.5">內容</td>
    </tr>
    <tr>
      <td class="CellHead" height="12.5">2</td>
      <td class="CellHead" height="12.5">內容</td>
    </tr>
    <tr>
      <td class="CellHead" height="12.5">名</td>
      <td class="CellOdd" style="word-wrap:break-word;word-break:break-all;" height="12.5">很長很長。。。</td>
    </tr>
    <tr>
      <td class="CellHead" height="12.5">3</td> 
      <td class="CellHead" height="12.5">內容</td>
    </tr>
    <tr>
      <td class="CellHead" height="12.5">4</td>
      <td class="CellHead" height="12.5">內容</td>
    </tr>
   
  </table>
<div class="LstScroll10" id="tableRight" style="border:0px;border-top-style:none;width:100%;">
   <table class="TblWidth" style="margin-left:0px; margin-top:0px; border-top:0px;width:100%;">
   <%
    for ( int i = 0; i < iMaxIndex ; i++) {
      doc = (KDocument)ltDocList.get(i);
      strDocName = doc.getDocName().trim();
   %>
    <tr height="23.3"><td>
             <a href="#" onClick="selectWindow( <%= i %>, '1' )" ><%= strDocName %></a> 
      </td></tr>
    }
   </table>
</div>
</body>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章