Jquery实战---table高度自动调整
最近一直在搞前端优化，说白了就是旧系统翻新，改变样式，美化一下，再次忽悠用户。虽说的简单，但实际操作中遇到的问题还是不少的。
例如这次遇到了一个比较棘手的问题。table中各种嵌套table，然后border还要自动补齐高度。
把系统中那一模块抽取出来在vs中测试了一把，写了一段js代码，jquery操作dom，各种选择器，实现了要达到的效果。
然而现实和理想是有差距的，嵌套在复杂代码中的一段html不会像一段纯净的html那么好操作。当然各种调试下来，最终也解决了问题。
效果图：
整个是一个大的table，左侧tdleft，右侧tdright，tdright中包含N个小table，这些小table的高度，需要自动调整到和左侧tdleft的高度一致。
实现效果之前：
实现效果之后：
附代码：
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>
最最后，附一张我优化的系统的截图：
