js实现动态改变table高度

最新推荐文章于 2024-08-11 19:20:49 发布

kikumaru714

最新推荐文章于 2024-08-11 19:20:49 发布

阅读量1.7k

点赞数

分类专栏：编程语言文章标签： js 前端

本文链接：https://blog.csdn.net/kikumaru714/article/details/103916472

版权

编程语言专栏收录该内容

7 篇文章 0 订阅

订阅专栏

左右两个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>