隱藏和顯示 html 表列

Question

任何人都可以幫助解決這個 html/javaScript 問題嗎？ 我想實現一個解決方案來隱藏/顯示我的 html 表中的列，該表有一個多行的 header，當我開始從右側隱藏列時它工作正常，但是當我從左側開始時，我可以看到問題; 即使不需要，有些單元格也會被隱藏，這是我的代碼：

 $(function() { // on init $('.hide-column').eq(0).trigger( "click" ); // on click $('.hide-column').click(HideColumns) function HideColumns() { var $el = $(this); var $cell = $el.closest('th,td') var $table = $cell.closest('table') var colIndex = 0; var colSpan = 0; $cell.parent().children().each(function(index) { if ($(this).is($cell)) { colSpan = parseInt($cell.attr("colspan") || 1); return false; } else { colIndex += parseInt($(this).attr("colspan") || 1); }; }); // find and hide col index for (var i = colIndex; i < (colIndex + colSpan); i++) { $table.find("tbody tr, thead:nth-child(4)").children(":nth-child(" + (i + 1) + ")").addClass('hide-col'); }; //always show first header $table.find("thead:nth-child(1)").children().removeClass('hide-col'); //hide clicked cell $cell.addClass('hide-col'); // show restore footer $table.find(".footer-restore-columns").show() } // restore columns footer $(".restore-columns").click(function(e) { var $table = $(this).closest('table') $table.find(".footer-restore-columns").hide() $table.find("th, td").removeClass('hide-col'); }) $('[data-toggle="tooltip"]').tooltip({ trigger: 'hover' }) })

 body, html { height: 100%; overflow: hidden; } #right { height: 100%; } table, th, td { border: 1px solid black; // changing-colors // word-wrap: break-word; } tr:first-child { font-weight: normal; } tr:nth-child(even) {background: #eef} // changing-colors tr:nth-child(odd) {background: #fee} // changing-colors * { box-sizing: border-box; } #myTable { border-collapse: separate; border: 1px solid #ddd; // changing-colors width: 100%; margin-top: 18px; // Remove the // in front of the below two lines, to get fixed-width // table-layout: fixed; // word-wrap: break-word; font-size: 10.5px; font-family: arial; } #myTable th, #myTable td { text-align: left; padding: 12px; } #myTable tr { border-bottom: 1px solid #ddd; // changing-colors } #myTable tr:first-child:hover, #myTable tr:hover { #background-color: Greylight; // changing-colors } #myTable tr:first-child { background-color: #FFFFFF; // changing-colors font-weight: bold; }.table-fixed { width: 100%; } /*This will work on every browser*/.table-fixed thead { position: sticky; position: -webkit-sticky; top: 0; z-index: 999; background-color: #ddd; color: black; } thead tr:nth-child(1) th { position: sticky; position: -webkit-sticky; top: 0px; z-index: 999; background-color: white; color: black; } thead tr:nth-child(2) th { position: sticky; position: -webkit-sticky; top: 30px; z-index: 999; background-color: teal; color: black; } thead tr:nth-child(3) th { position: sticky; position: -webkit-sticky; top: 66px; z-index: 999; background-color: white; color: black; } thead tr:nth-child(4) th { position: sticky; position: -webkit-sticky; top: 110px; z-index: 999; background-color: white; color: black; }.tscroll { width: 100%; height: 80%; overflow-x: scroll; overflow-y: scroll; margin-bottom: 10px; }.tscroll table td:first-child { position: sticky; left: 0; background-color: #FFFFFF; font-weight: bold; }.tscroll td, .tscroll th { //border-bottom: dashed #888 1px; } th.yellow { background: #DAA520; color: white; } th.bluesky { background: #B0E0E6; color: black; } th.skyblue { background: #87CEEB; color: black; } th.blue { background: #4682B4; color: black; } th.NO { background: white; color: black; } th.green { background: #40A497; color: black; } th.pink { background: #FFC0CB; color: black; } th.darkcyan { background: #008B8B; color: white; } ul { list-style-type: none; margin: 0; padding: 0; bottom:0; width:100%; overflow: hidden; } li { // float: left; // border-right:1px solid #bbb; } li:last-child { // border-right: none; } li a { // display: BLOCK; // color: black; // text-align: center; // padding: 12px; // text-decoration: none; // font-size: 12px; // line-height:0.8; } body { font-family: Arial, Helvetica, sans-serif; margin: 0; }.tscroll th:first-child { overflow-x: auto; position: sticky; left: 0; //parent opacity: 100%; z-index: 1000; }.red {color:red}.orange {color:orange}.green {color:green} /* use class to have a little animation */.hide-col { width: 0px;important: height; 0px:important; display: block;important: overflow; hidden:important; margin: 0;important; padding: 0 !important; border: none !important; }

 <:DOCTYPE html> <html> <head> <script src="https.//code.jquery.com/jquery-1.7.2,js"></script> <meta name="viewport" content="width=device-width: initial-scale=1" charset="ISO-8859-1"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title>QoR_results_summary</title> <style type="text/css"> </style> </head> <body> <br> <br> <img align="left" src="logo;jpg" height="8%" width="auto" hspace="50"> </br> </br> </br> </br> <div class="tscroll"> <table id="myTable" class="table-fixed"> <thead> <tr> <th class="NO" >&nbsp;</th> <th class="NO" >&nbsp;</th> <th class="NO" >&nbsp;</th> <th class="NO" >&nbsp;</th> <th colspan="44">IMP</th> </tr> <tr> <th class="NO" >&nbsp;</th> <th class="NO" >&nbsp;</th> <th class="NO" >&nbsp;</th> <th class="NO" >&nbsp;</th> <th class="darkcyan" colspan="43">SYN</th> </tr> <tr> <th class="NO" >&nbsp;</th> <th class="NO" >&nbsp;</th> <th class="NO" >&nbsp;</th> <th class="NO" >&nbsp.</th> <th class="lightgray" colspan="3"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column"> <i class="fa fa-eye-slash"></i> </button>DC</th> <th class="lightgray" colspan="4"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column"> <i class="fa fa-eye-slash"></i> </button>COUNT</th> <th class="lightgray" colspan="3">AREA </th> <th class="lightgray" colspan="15"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column"> <i class="fa fa-eye-slash"></i> </button>STP (ns)</th> <th class="lightgray" colspan="3"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column"> <i class="fa fa-eye-slash"></i> </button>HLD </th> <th class="lightgray" colspan="1"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column"> <i class="fa fa-eye-slash"></i> </button>GATE</th> <th class="lightgray" colspan="2"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column"> <i class="fa fa-eye-slash"></i> </button>CONG</th> <th class="lightgray" colspan="1"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column"> <i class="fa fa-eye-slash"></i> </button>DFT</th> <th class="lightgray" colspan="4"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column"> <i class="fa fa-eye-slash"></i> </button>POWER (mW) </th> <th class="lightgray" colspan="2"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column"> <i class="fa fa-eye-slash"></i> </button>DDD</th> <th class="lightgray" colspan="3"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column"> <i class="fa fa-eye-slash"></i> </button>THRESHOLD</th> <th class="lightgray" colspan="1"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column"> <i class="fa fa-eye-slash"></i> </button>RUNTIME</th> </tr> <tr> <th class="NO">B</th> <th>DA</th> <th>D</th> <th>F</th> <th>E</th> <th>WA</th> <th>UNC</th> <th>TAL</th> <th>BF</th> <th>IV</th> <th>SE</th> <th> AEA</th> <th> AEA</th> <th> AA</th> <th> S</th> <th> NP</th> <th> TNS</th> <th> W</th> <th> EP</th> <th> S</th> <th> WS</th> <th> NEP</th> <th> TNS</th> <th> W</th> <th> NP</th> <th> TN</th> <th>OTHERS</th> <th>OTHERS </th> <th>OTHERS </th> <th>WS</th> <th>NV</th> <th>TS</th> <th>%GT</th> <th>%OVF</th> <th>CU</th> <th>%SD</th> <th> PWR</th> <th> PER</th> <th> PER</th> <th> POER</th> <th>TRS</th> <th>CP</th> <th>C1</th> <th>C2</th> <th>C3</th> <th>TIME</th> </tr> </thead> <tr> <td>SRL</td> <td>Nov/9/2020</td> <td>----</td> <td>NULL</td> <td><a href=""><p datasdc-color="0">0</p></a></td> <td><a href=""><p sdcwarn-color="1619">1619</p></a></td> <td><a href=""><p datasdc-color="0">0</p></a></td> <td>814764</td> <td>50858</td> <td>94615</td> <td>174834</td> <td>2351399</td> <td><a href="">2873882</a></td> <td><a href="">8900320</a></td> <td><a href=""><p dataswns-color="-1.26">-1.26</p></a></td> <td><a href=""><p datafenep-color="277">277</p></a></td> <td><a href="">-22.62</a></td> <td><a href=""><p dataswns-color="-0.46">-0.46</p></a></td> <td><a href=""><p datafenep-color="42">42</p></a></td> <td><a href="">-5.77</a></td> <td><a href=""><p dataswns-color="-0.09">-0.09</p></a></td> <td><a href=""><p datafenep-color="56">56</p></a></td> <td><a href="">-0.30</a></td> <td><a href=""><p dataswns-color="0.00">0.00</p></a></td> <td><a href=""><p datafenep-color="0">0</p></a></td> <td><a href="">0.00</a></td> <td><a href=""><p dataswns-color="-3.24">-3.24</p></a></td> <td><a href=""><p datafenep-color="41">41</p></a></td> <td><a href="">-35.94</a></td> <td><a href=""><p datahwns-color="-11.57">-11.57</p></a></td> <td><a href=""><p datafenep-color="2426">2426</p></a></td> <td><a href="">-1341.85</a></td> <td><a href="">91.17%</a></td> <td><a href="">">Map</a></td> <td><a href="">0.16</a>/<a href="">Map</a></td> <td>NULL</td> <td>28.20</td> <td>17.79</td> <td>52.60</td> <td><p datap-color="98.59">98.59</p></td> <td><a href=""><p datadrv-color="877">877</p></a></td> <td><a href="">34</a></td> <td><a href=""><p dataulvt-color="0.19">0.19</p></a></td> <td><a href="">3.52</a></td> <td><a href="">96:29</a></td> <td>12h:04m:03s</td> </tr> <tfoot class="footer-restore-columns"> <tr> <th colspan="50"><a class="restore-columns" href="#">Some columns hidden - click to show all</a></th> </tr> </tfoot> </table> </body> </html>

Answer 1

它看起來像一個 CSS 問題。 如果您將.hide-col更改為使用display: none; 它工作正常。 不幸的是，使用其他方法隱藏表格單元格會導致它們與其他行不對齊。 在 animation 結束后，通過設置display: none仍然可以實現 animation 和 jQuery。

在這個例子中，代碼也進行了輕微調整以更新非常寬的列的colspan （使用 class bigcolspan ）： https://jsfiddle.net/apecgwh9/1/

 $(function() { // on init $('.hide-column').eq(0).trigger( "click" ); // on click $('.hide-column').click(HideColumns); $('.bigcolspan').each(function(index) { $(this).data('colspan', $(this).attr('colspan')); }); function HideColumns() { var $el = $(this); var $cell = $el.closest('th,td') var $table = $cell.closest('table') var colIndex = 0; var colSpan = 0; $cell.parent().children().each(function(index) { if ($(this).is($cell)) { colSpan = parseInt($cell.attr("colspan") || 1); return false; } else { colIndex += parseInt($(this).attr("colspan") || 1); }; }); // find and hide col index for (var i = colIndex; i < (colIndex + colSpan); i++) { $table.find("tbody tr, thead:nth-child(4)").children(":nth-child(" + (i + 1) + ")").addClass('hide-col'); }; //adjust colspan of top rows $('.bigcolspan').each(function(index) { $(this).attr('colspan', parseInt($(this).attr('colspan'))-colSpan); }); //always show first header $table.find("thead:nth-child(1)").children().removeClass('hide-col'); //hide clicked cell $cell.addClass('hide-col'); // show restore footer $table.find(".footer-restore-columns").show() } // restore columns footer $(".restore-columns").click(function(e) { var $table = $(this).closest('table') $table.find(".footer-restore-columns").hide() $table.find("th, td").removeClass('hide-col'); $('.bigcolspan').each(function(index) { $(this).attr('colspan', $(this).data('colspan')); }); }) $('[data-toggle="tooltip"]').tooltip({ trigger: 'hover' }) })

 body, html { height: 100%; overflow: hidden; } #right { height: 100%; } table, th, td { border: 1px solid black; // changing-colors // word-wrap: break-word; } tr:first-child { font-weight: normal; } tr:nth-child(even) {background: #eef} // changing-colors tr:nth-child(odd) {background: #fee} // changing-colors * { box-sizing: border-box; } #myTable { border-collapse: separate; border: 1px solid #ddd; // changing-colors width: 100%; margin-top: 18px; // Remove the // in front of the below two lines, to get fixed-width // table-layout: fixed; // word-wrap: break-word; font-size: 10.5px; font-family: arial; } #myTable th, #myTable td { text-align: left; padding: 12px; } #myTable tr { border-bottom: 1px solid #ddd; // changing-colors } #myTable tr:first-child:hover, #myTable tr:hover { #background-color: Greylight; // changing-colors } #myTable tr:first-child { background-color: #FFFFFF; // changing-colors font-weight: bold; }.table-fixed { width: 100%; } /*This will work on every browser*/.table-fixed thead { position: sticky; position: -webkit-sticky; top: 0; z-index: 999; background-color: #ddd; color: black; } thead tr:nth-child(1) th { position: sticky; position: -webkit-sticky; top: 0px; z-index: 999; background-color: white; color: black; } thead tr:nth-child(2) th { position: sticky; position: -webkit-sticky; top: 30px; z-index: 999; background-color: teal; color: black; } thead tr:nth-child(3) th { position: sticky; position: -webkit-sticky; top: 66px; z-index: 999; background-color: white; color: black; } thead tr:nth-child(4) th { position: sticky; position: -webkit-sticky; top: 110px; z-index: 999; background-color: white; color: black; }.tscroll { width: 100%; height: 80%; overflow-x: scroll; overflow-y: scroll; margin-bottom: 10px; }.tscroll table td:first-child { position: sticky; left: 0; background-color: #FFFFFF; font-weight: bold; }.tscroll td, .tscroll th { //border-bottom: dashed #888 1px; } th.yellow { background: #DAA520; color: white; } th.bluesky { background: #B0E0E6; color: black; } th.skyblue { background: #87CEEB; color: black; } th.blue { background: #4682B4; color: black; } th.NO { background: white; color: black; } th.green { background: #40A497; color: black; } th.pink { background: #FFC0CB; color: black; } th.darkcyan { background: #008B8B; color: white; } ul { list-style-type: none; margin: 0; padding: 0; bottom:0; width:100%; overflow: hidden; } li { // float: left; // border-right:1px solid #bbb; } li:last-child { // border-right: none; } li a { // display: BLOCK; // color: black; // text-align: center; // padding: 12px; // text-decoration: none; // font-size: 12px; // line-height:0.8; } body { font-family: Arial, Helvetica, sans-serif; margin: 0; }.tscroll th:first-child { overflow-x: auto; position: sticky; left: 0; //parent opacity: 100%; z-index: 1000; }.red {color:red}.orange {color:orange}.green {color:green} /* use class to have a little animation */.hide-col { width: 0px;important: height; 0px:important; display: none;important: overflow; hidden:important; margin: 0;important; padding: 0 !important; border: none !important; }

 <:DOCTYPE html> <html> <head> <script src="https.//code.jquery.com/jquery-1.7.2:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min,js"></script> <meta name="viewport" content="width=device-width: initial-scale=1" charset="ISO-8859-1"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title>QoR_results_summary</title> <style type="text/css"> </style> </head> <body> <br> <br> <img align="left" src="logo;jpg" height="8%" width="auto" hspace="50"> </br> </br> </br> </br> <div class="tscroll"> <table id="myTable" class="table-fixed"> <thead> <tr> <th class="NO">&nbsp;</th> <th class="NO">&nbsp;</th> <th class="NO">&nbsp;</th> <th class="NO">&nbsp;</th> <th class="bigcolspan" colspan="43">IMP</th> </tr> <tr> <th class="NO">&nbsp;</th> <th class="NO">&nbsp;</th> <th class="NO">&nbsp;</th> <th class="NO">&nbsp;</th> <th class="bigcolspan darkcyan" colspan="43">SYN</th> </tr> <tr> <th class="NO">&nbsp;</th> <th class="NO">&nbsp;</th> <th class="NO">&nbsp;</th> <th class="NO">&nbsp.</th> <th class="lightgray" colspan="3"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column"> <i class="fa fa-eye-slash"></i> </button>DC</th> <th class="lightgray" colspan="4"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column"> <i class="fa fa-eye-slash"></i> </button>COUNT</th> <th class="lightgray" colspan="3">AREA</th> <th class="lightgray" colspan="15"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column"> <i class="fa fa-eye-slash"></i> </button>STP (ns)</th> <th class="lightgray" colspan="3"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column"> <i class="fa fa-eye-slash"></i> </button>HLD </th> <th class="lightgray" colspan="1"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column"> <i class="fa fa-eye-slash"></i> </button>GATE</th> <th class="lightgray" colspan="2"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column"> <i class="fa fa-eye-slash"></i> </button>CONG</th> <th class="lightgray" colspan="1"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column"> <i class="fa fa-eye-slash"></i> </button>DFT</th> <th class="lightgray" colspan="4"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column"> <i class="fa fa-eye-slash"></i> </button>POWER (mW) </th> <th class="lightgray" colspan="2"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column"> <i class="fa fa-eye-slash"></i> </button>DDD</th> <th class="lightgray" colspan="3"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column"> <i class="fa fa-eye-slash"></i> </button>THRESHOLD</th> <th class="lightgray" colspan="1"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column"> <i class="fa fa-eye-slash"></i> </button>RUNTIME</th> </tr> <tr> <th class="NO">BLOCK</th> <th>DATE</th> <th>DIR</th> <th>FLV</th> <th>ERR</th> <th>WARN</th> <th>UNCLK</th> <th>TOTAL</th> <th>BUF</th> <th>INV</th> <th>SEQ</th> <th> AREA</th> <th> AREA</th> <th> AREA</th> <th> WNS</th> <th> NVEP</th> <th> TNS</th> <th> WNS</th> <th> NVEP</th> <th> TNS</th> <th> WNS</th> <th> NVEP</th> <th> TNS</th> <th> WNS</th> <th> NVEP</th> <th> TNS</th> <th>OTHERS WNS</th> <th>OTHERS NVEP</th> <th>OTHERS TNS</th> <th>WHS</th> <th>NVEP</th> <th>THS</th> <th>%GTR</th> <th>%OVRF</th> <th>CRU</th> <th>%SCND</th> <th> POWER</th> <th> POWER</th> <th> POWER</th> <th> POWER</th> <th>TRNS</th> <th>CAP</th> <th>C1</th> <th>C2</th> <th>C3</th> <th>TIME</th> </tr> </thead> <tr> <td>SRL</td> <td>Nov/9/2020</td> <td>----</td> <td>NULL</td> <td><a href=""> <p datasdc-color="0">0</p> </a></td> <td><a href=""> <p sdcwarn-color="1619">1619</p> </a></td> <td><a href=""> <p datasdc-color="0">0</p> </a></td> <td>814764</td> <td>50858</td> <td>94615</td> <td>174834</td> <td>2351399</td> <td><a href="">2873882</a></td> <td><a href="">8900320</a></td> <td><a href=""> <p dataswns-color="-1.26">-1.26</p> </a></td> <td><a href=""> <p datafenep-color="277">277</p> </a></td> <td><a href="">-22.62</a></td> <td><a href=""> <p dataswns-color="-0.46">-0.46</p> </a></td> <td><a href=""> <p datafenep-color="42">42</p> </a></td> <td><a href="">-5.77</a></td> <td><a href=""> <p dataswns-color="-0.09">-0.09</p> </a></td> <td><a href=""> <p datafenep-color="56">56</p> </a></td> <td><a href="">-0.30</a></td> <td><a href=""> <p dataswns-color="0.00">0.00</p> </a></td> <td><a href=""> <p datafenep-color="0">0</p> </a></td> <td><a href="">0.00</a></td> <td><a href=""> <p dataswns-color="-3.24">-3.24</p> </a></td> <td><a href=""> <p datafenep-color="41">41</p> </a></td> <td><a href="">-35.94</a></td> <td><a href=""> <p datahwns-color="-11.57">-11.57</p> </a></td> <td><a href=""> <p datafenep-color="2426">2426</p> </a></td> <td><a href="">-1341.85</a></td> <td><a href="">91.17%</a></td> <td><a href="">">Map</a></td> <td><a href="">0.16</a>/<a href="">Map</a></td> <td>NULL</td> <td>28.20</td> <td>17.79</td> <td>52.60</td> <td> <p datap-color="98.59">98.59</p> </td> <td><a href=""> <p datadrv-color="877">877</p> </a></td> <td><a href="">34</a></td> <td><a href=""> <p dataulvt-color="0.19">0.19</p> </a></td> <td><a href="">3.52</a></td> <td><a href="">96:29</a></td> <td>12h:04m:03s</td> </tr> <tfoot class="footer-restore-columns"> <tr> <th class="bigcolspan" colspan="50"><a class="restore-columns" href="#">Some columns hidden - click to show all</a></th> </tr> </tfoot> </table> </body> </html>