Javascript 如何使用表列作为滑块
我想建立单页网站。将有一个表格作为主要内容。此表的第一列可以通过按钮进行切换 我只想在slidebar上显示表的第一列，而不是两列（表和slidebar）。 通过点击按钮，表格的第一列应该最小化 我怎样才能实现这个想法？我对前端概念绝对陌生，每一个答案对我都很重要Javascript 如何使用表列作为滑块,javascript,jquery,html,css,bootstrap-4,Javascript,Jquery,Html,Css,Bootstrap 4,我想建立单页网站。将有一个表格作为主要内容。此表的第一列可以通过按钮进行切换 我只想在slidebar上显示表的第一列，而不是两列（表和slidebar）。 通过点击按钮，表格的第一列应该最小化 我怎样才能实现这个想法？我对前端概念绝对陌生，每一个答案对我都很重要 <aside class="main-sidebar sidebar-dark-primary elevation-4"> <div class="sidebar">
<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>
</li>
<div class="dropdown-divider"></div>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="far fa-user"> </i>
<p>
Theobald
</p>
</a>
</li>
<div class="dropdown-divider"></div>
</ul>
</nav>
</div>
</aside>
<div class="content" style="overflow: scroll; padding: 10px">
<div class="container-fluid">
<div class="row">
<div>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<td>Name</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>Adelfried</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><i class="far fa-user"> </i>Kalona</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><i class="far fa-user"> </i>Raynard</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><i class="far fa-user"> </i>Wesley</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><i class="far fa-user"> </i>Theobald</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
名称
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbb
中交
dddddddddddddddd
依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依
阿德弗里德
卡罗纳
雷纳尔
卫斯理
西奥博尔德
var table=document.getElementById（'usertable'）；
var-toggleCollapsed=函数（e）{
if（table.classList.contains（'collapsed'））{
表.classList.remove（'collazed'）；
}否则{
table.classList.add（'collapsed'）；
}
}
table.addEventListener（'click'，toggleCollapsed）表td：第一个孩子{
背景色：黑色；
颜色：白色；
}
表td：第一个孩子i{
右边距：5px；
}
表1.1：第一个孩子{
文本对齐：居中；
}
表1.1：第一个孩子i{
右边距：0；
}
table.td:第一个孩子。用户名{
显示：无；
}
名称
AAAAAAAAAAAAAA
bbbbbbbbbbbbbbbb
中交
dddddddddddddddd
依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依
阿德弗里德
卡罗纳
雷纳尔
卫斯理
西奥博尔德