隐藏/显示 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.