Jquery實戰---table高度自動調整

時間 2019-12-09

標籤 jquery 實戰 table 高度自動調整欄目 JQuery 简体版

原文原文鏈接

最近一直在搞前端優化，說白了就是舊系統翻新，改變樣式，美化一下，再次忽悠用戶。雖然說的簡單，但實際操做中遇到的問題仍是很多的。css

例如此次遇到了一個比較棘手的問題。table中各類嵌套table，而後border還要自動補齊高度。html

把系統中那一模塊抽取出來在vs中測試了一把，寫了一段js代碼，jquery操做dom，各類選擇器，實現了要達到的效果。前端

然而現實和理想是有差距的，嵌套在複雜代碼中的一段html不會像一段純淨的html那麼好操做。固然各類調試下來，最終也解決了問題。jquery

效果圖：dom

整個是一個大的table，左側tdleft，右側tdright，tdright中包含N個小table，這些小table的高度，須要自動調整到和左側tdleft的高度一致。前端優化

實現效果以前：ide

實現效果以後：測試

附代碼：優化

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>Document</title>
  9 
 10     <script src="http://cdn.static.runoob.com/libs/jquery/1.11.0/jquery.min.js"></script>
 11     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous" />
 12     <style>
 13         table {
 14             border: 1px solid blue;
 15         }
 16         
 17         .tdright,
 18         .tdleft {
 19             border: 1px solid red;
 20         }
 21         
 22         * {
 23             box-sizing: border-box;
 24         }
 25     </style>
 26 
 27 </head>
 28 
 29 <body>
 30 
 31     <table class="table_body">
 32         <tr>
 33             <td class="tdleft" style="border-right:1px solid red">tdleft高度測試<br>tdleft高度測試<br>tdleft高度測試 <br> tdleft高度測試 <br>tdleft高度測試 <br>tdleft高度測試 <br></td>
 34             <td class="tdright">
 35                 <table class="table1">
 36                     <td>table1</td>
 37                     <td>table1</td>
 38                     <td>table1</td>
 39                     <td>table1</td>
 40                     <td>table1</td>
 41                     <td>table1</td>
 42                     <td>table1</td>
 43                 </table>
 44                 <table class="table2">
 45                     <td>table2</td>
 46                     <td>table2</td>
 47                     <td>table2</td>
 48                     <td>table2</td>
 49                     <td>table2</td>
 50                     <td>table2</td>
 51                     <td>table2</td>
 52                 </table>
 53                 <table class="table4Supplement" style="height:0px">
 54                     <td>自動調整高度</td>
 55                     <td>自動調整高度</td>
 56                     <td>自動調整高度</td>
 57                     <td>自動調整高度</td>
 58                     <td>自動調整高度</td>
 59                     <td>自動調整高度</td>
 60                     <td>自動調整高度</td>
 61                 </table>
 62 
 63             </td>
 64         </tr>
 65         <tr>
 66             <td class="tdleft" style="border-right:1px solid red">tdleft高度測試<br>tdleft高度測試 <br><br>tdleft高度測試 <br> <br> tdleft高度測試 <br> <br></td>
 67             <td class="tdright">
 68                 <table class="table1">
 69                     <td>table1</td>
 70                     <td>table1</td>
 71                     <td>table1</td>
 72                     <td>table1</td>
 73                     <td>table1</td>
 74                     <td>table1</td>
 75                     <td>table1</td>
 76                 </table>
 77                 <table class="table2">
 78                     <td>table2</td>
 79                     <td>table2</td>
 80                     <td>table2</td>
 81                     <td>table2</td>
 82                     <td>table2</td>
 83                     <td>table2</td>
 84                     <td>table2</td>
 85                 </table>
 86                 <table class="table4Supplement" style="height:0px">
 87                     <td>自動調整高度</td>
 88                     <td>自動調整高度</td>
 89                     <td>自動調整高度</td>
 90                     <td>自動調整高度</td>
 91                     <td>自動調整高度</td>
 92                     <td>自動調整高度</td>
 93                     <td>自動調整高度</td>
 94                 </table>
 95 
 96             </td>
 97         </tr>
 98 
 99     </table>
100 
101     <textarea name="" id="text" cols="30" rows="10"></textarea>
102 
103     <script>
104         $(function() {
105             var $rows = $(".table_body>tbody>tr"); //獲取最外側table全部行的jquery對象
106             var rowslen = $rows.length; //最外側table的總行數
107             //alert(rowslen);
108             for (var i = 0; i < rowslen; i++) { //循環開始調整每一行的高度
109                 var $rowspcific = $($rows.get(i)); //獲取每一行的jquery對象
110                 var tdleft_height = $rowspcific.find(".tdleft").height(); //左側td的高度
111                 // alert("tdleft_height=" + tdleft_height);
112                 var $tables = $rowspcific.find(".tdright table:not(.table4Supplement)"); //右側td中全部小table的jquery對象
113                 var len = $tables.length;
114                 // alert("right tables len=" + len);
115                 var height_total = 0;
116                 for (var j = 0; j < len; j++) { //循環每個小table，獲取總高度，與左側高度比較
117                     var height = $($tables.get(j)).height();
118                     height_total += height;
119                 }
120                 // alert("height_total=" + height_total);
121                 $("#text").text("height_total=" + height_total);
122                 var high_differ = tdleft_height - height_total; //兩邊高度差
123                 if (high_differ > 0) { //高度差大於0，則補齊高度差，table4Supplement是專門爲補齊高度增長的table。
124                     $rowspcific.find(".table4Supplement").height(high_differ);
125                 }
126             }
127 
128 
129         })
130     </script>
131 </body>
132 
133 </html>