擎天Lv19   
table表格的展开与折叠     
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>展开收缩</title>
	<link rel="stylesheet" type="text/css" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<style type="text/css">
		td,th{
		    text-align: center;
		}
		.success{
			display: none;
		}
		i{cursor: pointer;}
	</style>
</head>
<body>
	<div class="container">
	<div class="row clearfix">
		<div class="col-md-12 column">
			        <div class="table-responsive">
 			 <table class="table table-striped table-bordered table-hover">
    			
			    <thead>
			      <tr>
			        <th>订单编号</th>
			        <th>类型</th>
			        <th>客户名称</th>
			         <th>用户数</th>
			        <th>单价</th>
			        <th>金额(元)</th>
			        <th>投放日期  </th>
			        <th>订单状态</th>
			        <th>操作</th>
			        <th colspan="2">内容状态</th>
			      </tr>
			    </thead>
			    <tbody>
			    <tr>
			        <td> <i class="fa fa-chevron-right" data-flag="1"></i> 产品1</td>
			        <td>23/11/2013</td>
			        <td>待发货</td>
			         <td>产品1</td>
			        <td>23/11/2013</td>
			        <td>待发货</td>
			         <td>产品1</td>
			        <td>23/11/2013</td>
			        <td>待发货</td>
			         <td>产品1</td>
			         <td>产品1</td>
			    </tr>
			        <tr class="click1  success">
			        <th colspan="2">批次</th>
			        
			        <th colspan="2">用户数</th>
			        <th>单价</th>
			        <th>金额(元)</th>
			        <th colspan="2">投放日期  </th>
			  
			      
			        <th colspan="3">批次状态</th>
			      </tr>
			     <tr class="click1  success">
			        <td colspan="2">产品1</td>
			        <td colspan="2">1222</td>
			        <td>11元</td>
			         <td>300元</td>
			        <td colspan="2">23/11/2013</td>
			        <td colspan="3">待发货</td>			  
			    </tr>
			    <tr class="click1  success">
			        <td colspan="2">产品1</td>
			        <td colspan="2">1222</td>
			        <td>11元</td>
			         <td>300元</td>
			        <td colspan="2">23/11/2013</td>
			        <td colspan="3">待发货</td>
			    </tr>
			
			     <tr>
			        <td>产品1</td>
			        <td>23/11/2013</td>
			        <td>待发货</td>
			         <td>产品1</td>
			        <td>23/11/2013</td>
			        <td>待发货</td>
			         <td>产品1</td>
			        <td>23/11/2013</td>
			        <td>待发货</td>
			         <td>产品1</td>
			         <td>产品1</td>
			    </tr>
			     <tr>
			        <td>产品1</td>
			        <td>23/11/2013</td>
			        <td>待发货</td>
			         <td>产品1</td>
			        <td>23/11/2013</td>
			        <td>待发货</td>
			         <td>产品1</td>
			        <td>23/11/2013</td>
			        <td>待发货</td>
			         <td>产品1</td>
			         <td>产品1</td>
			      </tr>
			      <tr>
			        <td><i class="fa fa-chevron-right" data-flag="2"></i> 产品1</td>
			        <td>23/11/2013</td>
			        <td>待发货</td>
			         <td>产品1</td>
			        <td>23/11/2013</td>
			        <td>待发货</td>
			         <td>产品1</td>
			        <td>23/11/2013</td>
			        <td>待发货</td>
			         <td>产品1</td>
			         <td>产品1</td>
			      </tr>
			      </tr>
			        <tr class="click2  success">
			        <th colspan="2">批次</th>
			        
			        <th colspan="2">用户数</th>
			        <th>单价</th>
			        <th>金额(元)</th>
			        <th colspan="2">投放日期  </th>
			  
			      
			        <th colspan="3">批次状态</th>
			      </tr>
			     <tr class="clic2  success">
			        <td colspan="2">产品1</td>
			        <td colspan="2">1222</td>
			        <td>11元</td>
			         <td>300元</td>
			        <td colspan="2">23/11/2013</td>
			        <td colspan="3">待发货</td>
			    </tr>
			    <tr class="click2  success">
			        <td colspan="2">产品1</td>
			        <td colspan="2">1222</td>
			        <td>11元</td>
			         <td>300元</td>
			        <td colspan="2">23/11/2013</td>
			        <td colspan="3">待发货</td>
			    </tr>
			
			    </tbody>
			</table>
		    </div>
		</div>
	    </div>
    </div>
</body>
	<script type="text/javascript" src='http://www.htmleaf.com/js/jquery/1.10.1/jquery.min.js'></script>
	<script type="text/javascript" src='http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js'></script>
	<script type="text/javascript">
	
	    $(".fa-chevron-right").on('click', function(event) {
	    	var flag = $(this).attr("data-flag");
	    	$(".click"+flag).toggle();
	    		var $this=$(this);
	    	if($this.hasClass('fa-chevron-right')){
	    		$this.removeClass('fa-chevron-right').addClass('fa-chevron-down');
	    	}else{
	    		$this.removeClass('fa-chevron-down').addClass('fa-chevron-right');
	    	}
	    });
			
		
	</script>
</html>



json卡片全屏化修改-发言不显示昵称
晨风机器人转卡片功能
有了卡片代码怎么使用?怎么发到群里?
 0  已被阅读了171次  楼主 2019-10-11 04:16:11
回复列表

回复:table表格的展开与折叠

Powered by HadSky 7.3.4
© 2015-2020 PuYueTian
您的IP:34.204.183.113,2020-02-23 22:02:42,Processed in 0.1768 second(s).
Powered by HadSky
擎天QQxml、json代码、机器人配置交流论坛
已有0次打赏