亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用表格列作為滑塊

如何使用表格列作為滑塊

一只甜甜圈 2021-11-18 20:05:35
我想建立單頁網站。將有一個表格作為主要內容。該表的第一列可以通過按鈕切換。我只想在滑動條上顯示表格的第一列,而不是同時顯示它們(表格和滑動條)。通過點擊按鈕,表格的第一列應該被最小化。我怎樣才能實現這個想法?我對前端概念完全陌生,每個答案對我都很重要。    <aside class="main-sidebar sidebar-dark-primary elevation-4">        <div class="sidebar">            <nav class="mt-2">                <ul class="nav nav-pills nav-sidebar flex-column"                 data-widget="treeview" role="menu"                    data-accordion="false">                    <div>                        <li class="nav-item">                            <a href="#" class="nav-link">                                <i class="far fa-user"> </i>                                <p>                                    Adelfried                                </p>                            </a>                        </li>                    </div>                    <div class="dropdown-divider"></div>                    <li class="nav-item">                        <a href="#" class="nav-link">                            <i class="far fa-user"> </i>                            <p>                                Kalona                            </p>                        </a>                    </li>                    <div class="dropdown-divider"></div>                    <li class="nav-item">                        <a href="#" class="nav-link">                            <i class="far fa-user"> </i>                            <p>                                Raynard                            </p>                        </a>                    </li>                    <div class="dropdown-divider"></div>                    <li class="nav-item">                        <a href="#" class="nav-link">                            <i class="far fa-user"> </i>                            <p>                                Wesley                            </p>                        </a>
查看完整描述

1 回答

?
慕俠2389804

TA貢獻1719條經驗 獲得超6個贊

如果您只是希望第一列可折疊并具有不同的樣式,則可以完全移除滑塊。這是一個關于如何折疊第一列并為其設置樣式的基本示例:


var table = document.getElementById('usertable');


var toggleCollapsed = function(e) {

  if (table.classList.contains('collapsed')) {

    table.classList.remove('collapsed');

  } else {

    table.classList.add('collapsed');

  }

}


table.addEventListener('click', toggleCollapsed)

table td:first-child {

  background-color: black;

  color: white;

}

table td:first-child i {

  margin-right: 5px;

}

table.collapsed td:first-child {

  text-align:center;

}

table.collapsed td:first-child i {

  margin-right: 0;

}

table.collapsed td:first-child .username {

  display: none;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<table id="usertable" class="table table-striped table-bordered table-hover">

    <thead>

        <tr>

          <td><span class="username">Name</span></td>

            <td>AAAAAAAAAAAAAA</td>

            <td>BBBBBBBBBBBBBB</td>

            <td>CCCCCCCCCCCCCC</td>

            <td>DDDDDDDDDDDDDD</td>

            <td>EEEEEEEEEEEEEE</td>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td><i class="far fa-user"> </i><span class="username">Adelfried</span></td>

            <td></td>

            <td></td>

            <td></td>

            <td></td>

            <td></td>

            <td></td>

        </tr>

        <tr>

            <td><i class="far fa-user"> </i><span class="username">Kalona</span></td>

            <td></td>

            <td></td>

            <td></td>

            <td></td>

            <td></td>

            <td></td>

        </tr>

        <tr>

            <td><i class="far fa-user"> </i><span class="username">Raynard</span></td>

            <td></td>

            <td></td>

            <td></td>

            <td></td>

            <td></td>

            <td></td>


        </tr>

        <tr>

            <td><i class="far fa-user"> </i><span class="username">Wesley</span></td>

            <td></td>

            <td></td>

            <td></td>

            <td></td>

            <td></td>

            <td></td>

        </tr>

        <tr>

            <td><i class="far fa-user"> </i><span class="username">Theobald</span></td>

            <td></td>

            <td></td>

            <td></td>

            <td></td>

            <td></td>

            <td></td>

        </tr>

    </tbody>

</table>


查看完整回答
反對 回復 2021-11-18
  • 1 回答
  • 0 關注
  • 132 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號