隱藏/顯示 HTML 表中的列（標題中有多個列）
[英]Hide/Show Columns in an HTML Table (with multiple column in the header)
問題描述
誰能幫忙，我想隱藏/顯示我的 html 表列，我的表在 header 中有三行，需要隱藏/顯示包含小行的第二行的列，我使用了此處的示例Stackoverflow 但仍然無法成功完成這項工作，我的代碼如下：
$(function() { // on init $(".table-hideable.hide-col").each(HideColumnIndex); // on click $('.hide-column').click(HideColumnIndex) function HideColumnIndex() { var $el = $(this); var $cell = $el.closest('th,td') var $table = $cell.closest('table') var colIndex = $cell[0].cellIndex + 1; // find and hide col index $table.find("tbody tr, thead tr").children(":nth-child(" + colIndex + ")").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 { padding: 15px; }.table-hideable td, .table-hideable th { width: auto; transition: width.5s, margin.5s; }.btn-condensed.btn-condensed { padding: 0 5px; box-shadow: none; } /* 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="/scripts/snippet-javascript-console.min?js:v=1"></script> </head> <body> <link rel="stylesheet" type="text/css" href="https.//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap:css"> <link rel="stylesheet" type="text/css" href="https.//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min:css"> <link rel="stylesheet" type="text/css" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome:css"> <script type="text/javascript" src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min:js"></script> <script type="text/javascript" src="https.//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <table class="table table-condensed table-hover table-bordered table-striped table-hideable"> <thead> <tr> <th colspan="4" > TOP </th> </tr> <tr> <th colspan="2" > <button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column"> <i class="fa fa-eye-slash"></i> </button> A </th> <th colspan="2" > <button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column"> <i class="fa fa-eye-slash"></i> </button> B </th> </tr> <tr> <th> AA </th> <th class="hide-col"> AB </th> <th> BB </th> <th > BC </th> </tr> </thead> <tbody> <tr> <td>Home</td> <td>Index</td> <td>ActionResult</td> <td>Authorize</td> </tr> <tr> <td>Client</td> <td>Index</td> <td>ActionResult</td> <td>Authorize</td> </tr> <tr> <td>Client</td> <td>Edit</td> <td>ActionResult</td> <td>Authorize</td> </tr> </tbody> <tfoot class="footer-restore-columns"> <tr> <th colspan="4"><a class="restore-columns" href="#">Some columns hidden - click to show all</a></th> </tr> </tfoot> </table>
非常感謝
1 個解決方案
解決方案1
0 2020-12-04 09:59:07
試試這樣：
$(function() { // on click $('.hide-column').click(HideColumns) // on init $('.hide-column').eq(0).trigger( "click" ); 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(3)").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 { padding: 15px; }.table-hideable td, .table-hideable th { width: auto; transition: width.5s, margin.5s; }.btn-condensed.btn-condensed { padding: 0 5px; box-shadow: none; } /* 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="/scripts/snippet-javascript-console.min?js:v=1"></script> </head> <body> <link rel="stylesheet" type="text/css" href="https.//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap:css"> <link rel="stylesheet" type="text/css" href="https.//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min:css"> <link rel="stylesheet" type="text/css" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome:css"> <script type="text/javascript" src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min:js"></script> <script type="text/javascript" src="https.//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <table class="table table-condensed table-hover table-bordered table-striped table-hideable"> <thead> <tr> <th colspan="4"> TOP </th> </tr> <tr> <th colspan="2"> <button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column" data> <i class="fa fa-eye-slash"></i> </button> A </th> <th colspan="2"> <button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column"> <i class="fa fa-eye-slash"></i> </button> B </th> </tr> <tr> <th> AA </th> <th class="hide-col"> AB </th> <th> BB </th> <th> BC </th> </tr> </thead> <tbody> <tr> <td>Home</td> <td>Index</td> <td>ActionResult</td> <td>Authorize</td> </tr> <tr> <td>Client</td> <td>Index</td> <td>ActionResult</td> <td>Authorize</td> </tr> <tr> <td>Client</td> <td>Edit</td> <td>ActionResult</td> <td>Authorize</td> </tr> </tbody> <tfoot class="footer-restore-columns"> <tr> <th colspan="4"><a class="restore-columns" href="#">Some columns hidden - click to show all</a></th> </tr> </tfoot> </table>
由於正在使用帶有th的元素， colspan需要一種不同的方法。 上述解決方案不是只考慮當前列索引，而是根據單擊按鈕的th ( $cell ) 查找tbody內td單元格的索引范圍。
為了隱藏列的跨度，它首先遍歷表的第二行，將每個colspan添加到colIndex直到它到達$cell 。 然后隱藏在每一行上的td索引是從colIndex到colIndex + $cell的colspan （在 jQuery 中基於 1 ）。
顯示/隱藏html表列並將列首選項存儲在數據庫中的一種更好的（可維護）方法
[英]A better (maintainable) way to show/hide html table columns and store column preferences in a database
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.