javascript - 添加过渡到可折叠数据表-6ren

javascript - 添加过渡到可折叠数据表

转载作者：行者123 更新时间：2023-11-30 09:18:13

24

4

<分区>

这是我现在拥有的 https://codepen.io/andornagy/pen/gaGBZz我想向数据表添加折叠过渡。

请访问链接以查看整个示例请帮忙!

$(document).ready(function() {
	$('[data-toggle="toggle"]').change(function(){
		$(this).parents().next('.hide').toggle();
	});
});

table { 
	width: 750px; 
	border-collapse: collapse; 
	margin:50px auto;
	}

th { 
	background: #3498db; 
	color: white; 
	font-weight: bold; 
	}

td, th { 
	padding: 10px; 
	border: 1px solid #ccc; 
	text-align: left; 
	font-size: 18px;
	}

.labels tr td {
	background-color: #2cc16a;
	font-weight: bold;
	color: #fff;
}

.label tr td label {
	display: block;
}


[data-toggle="toggle"] {
	display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<table>
	<thead>
		<tr>
			<th>Regian</th>
			<th>Q1 2010</th>
			<th>Q2 2010</th>
			<th>Q3 2010</th>
			<th>Q4 2010</th>
		</tr>
	</thead>
	<tbody>
		<tbody class="labels">
			<tr>
				<td colspan="5">
					<label for="accounting">Accounting</label>
					<input type="checkbox" name="accounting" id="accounting" data-toggle="toggle">
				</td>
			</tr>
		</tbody>
		<tbody class="hide">
			<tr>
				<td>Australia</td>
				<td>$7,685.00</td>
				<td>$3,544.00</td>
				<td>$5,834.00</td>
				<td>$10,583.00</td>
			</tr>
			<tr>
				<td>Central America</td>
				<td>$7,685.00</td>
				<td>$3,544.00</td>
				<td>$5,834.00</td>
				<td>$10,583.00</td>
			</tr>
		</tbody>
		<tbody class="labels">
			<tr>
				<td colspan="5">
					<label for="management">Management</label>
					<input type="checkbox" name="management" id="management" data-toggle="toggle">
				</td>
			</tr>
		</tbody>
		<tbody class="hide">
			<tr>
				<td>Australia</td>
				<td>$7,685.00</td>
				<td>$3,544.00</td>
				<td>$5,834.00</td>
				<td>$10,583.00</td>
			</tr>
			<tr>
				<td>Central America</td>
				<td>$7,685.00</td>
				<td>$3,544.00</td>
				<td>$5,834.00</td>
				<td>$10,583.00</td>
			</tr>
			<tr>
				<td>Europe</td>
				<td>$7,685.00</td>
				<td>$3,544.00</td>
				<td>$5,834.00</td>
				<td>$10,583.00</td>
			</tr>
			<tr>
				<td>Middle East</td>
				<td>$7,685.00</td>
				<td>$3,544.00</td>
				<td>$5,834.00</td>
				<td>$10,583.00</td>
			</tr>
		</tbody>		
	</tbody>
</table>

24

4

0

文章推荐： javascript - 类型错误 : Cannot read property state of null

文章推荐： java - 写操作的 Netty ChannelFuture 什么时候变成 "done?"

文章推荐： tensorflow - 是否可以提取 tensorflow 中回归预测的置信值？

swift - 过渡到 UITabBarController
我需要错误修复方面的帮助。我使用 segue 在 ViewController 之间传输。我有 UITabBarController 和一个 UIViewController。当我单击 vc 中的按
android - 过渡到 FragmentActivity
我可以使用下面的代码转换到 Fragment 类，但是如何使用相同的代码转换到 FragmentActivity。 FragmentActivity activity = new ABC(); //
oop - 过渡到 OO ABAP？
似乎我们的大多数 SAP 程序员都在使用旧版本的 ABAP，这是面向对象之前的版本。我还注意到，OO 的语言更加简洁和现代(他们显然借此机会摆脱了已弃用的东西)。由于该系统尚未推出，因此进行任何重新
ios - 过渡到 ARC - 发布不引发错误
我正在尝试将现有的非 ARC 项目移动到 ARC。我已将build设置中的 Objective-C 自动引用计数标志设置为是。这当然造成了很多有关发送显式发布/自动发布消息的错误。对于代码中的错误，
javascript - 过渡到 Canvas 上绘制的曲线？
我有一条由贝塞尔曲线绘制的简单直线。挑战是改变它过渡的位置，即如果曲线的高度增加或减少，它应该在过渡中发生，而不是突然发生。所以我的问题是提供 Canvas 鼠标悬停时的过渡？如何提供曲线过渡？ ca
php - 过渡到 MVC 编码的最佳方式是什么？
自从我拿起一本 PHP 书籍并开始使用 PHP 编码已经过去了大约 5 个月。起初，我在没有任何组织计划或 MVC 的情况下创建了我所有的网站。我很快发现那很痛苦..然后我开始在 stackoverf
jedis - 从 JedisPool 过渡到 JedisCluster
我的应用程序使用 AWS 上的 ElastiCache 进行缓存。我们当前的设置使用基本的 Redis 集群，没有分片或故障转移。我们现在需要迁移到启用了分片、故障转移等的集群 Redis 弹性缓存。
svn - 将多头项目从 SVN 过渡到 HG
我们正在加入现代世界并从 SVN 过渡到 Mercurial 以进行源代码控制。其中大部分非常简单——只需将当前主干导入 HG 并进行克隆。一个项目有点花哨，我没有看到正确的方法来做到这一点。有问题
python - tensorflow 过渡到 GPU 版本
我已经使用 tensorflow 一段时间了，一切正常，直到我尝试切换到 gpu 版本。卸载了以前的tensorflow， pip 安装 tensorflow-gpu (v2.0) 下载并安装vis
swagger - 过渡到 Swashbuckle 5.0
我通过 Swashbuckle V4 使用 Swagger，并使用 API key 对端点进行身份验证。使用 Swashbuckle V4 时，以下配置完美运行(请注意，仅显示 Swagger 代码
java - 从 Castor 过渡到 JPA
我正在努力使我的 java 应用程序更符合标准，我面临的最大问题之一是将我们的 ORM 框架从 Castor JDO 转换为 JPA 实现(考虑 Hibernate 或 DataNucleus)。我们
javascript - Ember JS 过渡到/链接到回调
我希望在每次点击链接或在 EmberJS 中调用 transitionTo 时触发回调。我想这样做的原因是隐藏在进行转换时可能打开的菜单/下拉菜单。我不知道从哪里开始。我的 Google-fu 可能很
ios - 过渡到 Xcode 5 错误和丢失数据
我当时使用的是 Xcode 4.6.1，并且已经创建了一个由 apple 批准并在 App Store 上的 iphone/ipad 应用程序。它是为 5.1 的最低部署目标而构建的现在是时候让它与
ios - 从 UIViewController 过渡到 TabBarViewController
我已经寻找解决方案 6 个小时了，但没有找到适合我情况的解决方案。我的 Storyboard遵循以下流程: TabBarViewController -> NavigationController -
ios - 从 SKScene 过渡到 UIViewcontroller
例如，如果我有: class SpriteKitScene: SKScene { ... } 在那里我想要一个图像，当点击(按下，点击，触摸任何东西)时载入另一个文件: class UiViewcon
ios - 使用数据从 XIB 过渡到 Storyboard
所以我找到了一个如何从XIB过渡到storyboard的例子 NSString * storyboardName = @"CheckoutStoryboard"; UIStoryboard *stor
swift - 过渡到 ViewController 点击 TableViewCell
如何通过点击表格 View 单元格来转换到 View Controller ？我目前的结构是: 我使用 navigation controller 作为我在我的应用程序 atm 中导航的唯一方式。我
ios - 如何从 UIViewController 过渡到 UINavigationController
我正在尝试通过 segue 转换(模态)到 UINavigationController来自UIViewController .我的UIViewController和 UINavigationCont
ios - 如何从自定义 View 过渡到 AVPlayerViewController？
我有一个自定义 View : class MediaPlayerView: UIView { var mediaURL: URL? { didSet {
java - 从 Java 过渡到 C++
根据语言的发明时间和语言的结构，这种转变可能意味着要走另一条路，但我对我的 Java 能力相当有信心，或者至少我在这方面足够好。但我现在正在尝试使用 C++，但我遇到了困难。在 java 中，读取一

首页

博学

6Ren·AI

商城

javascript - 添加过渡到可折叠数据表