HTML Table之展开收起

原创

已于 2022-03-29 09:58:38 修改 · 4.8k 阅读

收录于

当前文章被以下社区和专栏收录：

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

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

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

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

标签