表格列折叠

此模板为一键安装导入，不建议手动修改。

模板：[刷新此页面] [编辑] [页面历史]
文档：[查看] [编辑] [页面历史]

简单说明

版本：1.0

说明：隐藏单独的表格列

使用方式

引入Widget:表格列折叠表格开头的类样式中请加入“col-fold”标签

'"`UNIQ--esc-00000000-QINU`"'

\n\{\{#Widget:表格列折叠\}\}\n\{\!class\e"wikitable\_sortable\_col-fold"\_style\e"width:100%;text-align:center"\n\!-\n!\_style\e"width:10%"\_\!\_图标\n!\_style\e"width:12%"\_\!\_名称\n!\_style\e"width:8%"\_\!\_稀有度\n!\_style\e"width:10%"\_\!\_类型\n!\_class\e"visible-md\_visible-sm\_visible-lg"\_style\e"width:25%"\!\_来源\n!\_class\e"visible-md\_visible-sm\_visible-lg"\_style\e"width:30%"\!\_用处\n\!-\n\!\n\!\n\!\n\!\n\!\n\!\n\!\}\n

作者

congeal_plume

+关注

标签

标签：widget

标签：方法

依赖页面

• Widget:表格列折叠

<script language="javaScript"> (window.RLQ = window.RLQ || []).push([["jquery"], function () { $(function () { console.log("BWiki表格列折叠加载成功"); var a = "<div class='b-extend'><div>隐藏表格竖列：</div></div> "; $(".col-fold").prepend(a)       //查找列，判断是否加载出表头       if ($(".col-fold>thead").length !== 0) { var thSum = $(".col-fold>thead>tr>th").length } else { var thSum = $(".col-fold>tbody>tr>th").length } for (var i = 0; i < thSum; i++) { var g = i + 1; if ($(".col-fold>thead").length !== 0) { var htmlText = $(".col-fold>thead>tr>th:nth-child(" + g + ")").html() var newClass = $(".col-fold>thead>tr>th:nth-child(" + g + ")").prop("className") } else { var htmlText = $(".col-fold>tbody>tr:first-child>th:nth-child(" + g + ")").html() var newClass = $(".col-fold>tbody>tr:first-child>th:nth-child(" + g + ")").prop("className") } newClass = newClass.replace("headerSort", "", "g") $(".b-extend").append("<button class='" + newClass + "' value=" + g + ">" + htmlText + "</button>") } $(".b-extend>button").click(cs) //显示隐藏列 function cs() { var g = parseInt($(this).val()) //添加样式 mw.util.addCSS(".col-fold-" + g + ">tbody>tr>td:nth-child(" + g + "),.col-fold-" + g + ">thead>tr>th:nth-child(" + g + "),.col-fold-" + g + ">tbody>tr>th:nth-child(" + g + "){display: none !important;}") var newClass = "col-fold-" + g $(".col-fold").toggleClass(newClass) //按钮样式改变 $(this).toggleClass("button-b"); } }) } ]) </script> <style> .col-fold{ position: relative; margin-top: 30px !important; } .b-extend { display: flex; flex-direction: row; justify-content: flex-end; flex-wrap: wrap; align-items: center; position: absolute; bottom: 20px; right: 0; top: -24px; height: 20px; z-index: 1000; opacity: 1; } .b-extend>button{ padding: 0 5px; border: 1px solid #0b4ab5; border-radius: 5px; margin: 0 1px; height: 20px; } #input-table { width: 50px; } .button-b{ background: #9dbafc; } .col-fold-1>thead>tr>th:nth-child(1) </style>

更新日志

1.0