社区文档构建进行中,欢迎编辑。社区答疑群(非官方):717421103,点点小课堂(腾讯会议):5696651544

全站通知:

表格列折叠

阅读

    

2024-03-28更新

    

最新编辑:congeal_plume

阅读:

  

更新日期:2024-03-28

  

最新编辑:congeal_plume

来自WIKI实验室WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索
页面贡献者 :
顾小满real
congeal_plume
Daikou

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

简单说明

版本: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


依赖页面

<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