表格列折叠

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

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

简单说明

版本：2.0

说明：隐藏单独的表格列

使用方式

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

{{#Widget:表格列折叠}}
{|class="wikitable sortable col-fold" style="width:100%;text-align:center"
|-
! style="width:10%" | 图标
! style="width:12%" | 名称
! style="width:8%" | 稀有度
! style="width:10%" | 类型
! class="visible-md visible-sm visible-lg" style="width:25%"| 来源
! class="visible-md visible-sm visible-lg" style="width:30%"| 用处
|-
|
|
|
|
| class="visible-md visible-sm visible-lg" style="width:25%"|
| class="visible-md visible-sm visible-lg" style="width:30%"|
|}

图标	名称	稀有度	类型	来源	用处

图标1	名称1	稀有度1	类型1	来源1	用处1

作者

congeal_plume

+关注

标签

标签：widget

标签：方法

依赖页面

• Widget:表格列折叠

<script language="javaScript"> (window.RLQ = window.RLQ || []).push([["jquery"], function () { //$(function () { console.log(`%c BWiki表格列折叠 %c v2.0 https://wiki.biligame.com/tools/?curid=108`, "background: #4a5366;padding:4px 8px;color:#fff", " background: #d3bc8e;padding:4px 8px;"); $(".col-fold").each(function (fIndex,fItem) { var newDom = $(`<div class='b-extend'><div>隐藏表格竖列：</div></div>`); $(this).find("tr").eq(0).children("th").each(function (index,item) { let newClass = $(this).attr("class") == undefined ? "" : $(this).attr("class").replace("headerSort", "", "g") let htmlText = $(this).text() newDom.append("<button class='" + newClass + "' value=" + index + ">" + htmlText + "</button>") }) newDom.find("button").click(colFoldHide) $(this).prepend(newDom) }) //显示隐藏列 function colFoldHide() { var num = parseInt($(this).val()) + 1 //添加样式 mw.util.addCSS(".col-fold-" + num + ">tbody>tr>td:nth-child(" + num + "),.col-fold-" + num + ">thead>tr>th:nth-child(" + num + "),.col-fold-" + num + ">tbody>tr>th:nth-child(" + num + "){display: none !important;}") var newClass = "col-fold-" + num $(this).parent(".b-extend").parent("table").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