HTML 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>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
</tbody>
</table>

 css：

.unclick {
    color: #333333;
}
.click {
    color: red;
}

 js：

<script type="text/javascript">
	$(".detail").on('click', function(event) {
		var type = $(this).attr("data-type");
		//var type = this.getAttribute("data-type");
		// 当toggle（），不带参数时,与show()和hide()的作用一样,切换元素的可见状态
		// 如果元素是可见的,则切换为隐藏状态;如果元素是隐藏的则切换为可见状态
		// 此时括号内可添加()毫秒(如1000)等),slow,normal,fast等
		$(".detail"+type).toggle();
		var $this=$(this);
		if($this.hasClass('unclick')){
			$this.removeClass('unclick').addClass('click');
		}else{
			$this.removeClass('click').addClass('unclick');
		}
	});
</script>