HTML Table之展开收起

askilledhand

已于 2022-03-29 09:58:38 修改

阅读量4.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： html table

于 2019-06-24 13:46:14 首次发布

本文链接：https://blog.youkuaiyun.com/askilledhand/article/details/93474915

博客展示了HTML表格点击展开效果的效果图，第一条和第二条效果相同，第一条为点击后展开效果，并给出了实现该效果的主要代码，涉及table、css和js。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图，第一条和第二条效果相同，第一条是点击后展开效果：

table

主要代码如下：

table：

<thead>
	<tr>
		<td>条数</td>
		<td>内容</td>
	</tr>
</thead>
<tbody>
	<tr>
		<td>第1条</td>
		<td class="detail unclick" data-type = "1">点击查看详细内容</td>
	</tr>
	<tr class="detail1 hide">
		<td colspan="2" style="text-align: center;">第1条详细</td>
	</tr>
	<tr>
		<td>第2条</td>
		<td class="detail unclick" data-type = "2">点击查看详细内容</td>
	</tr>
	<tr class="detail2 hide">
		<td colspan="2" style="text-align: center;">第2条详细</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&a