前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >表格列的hover状态与选中状态

表格列的hover状态与选中状态

作者头像
练小习
发布2018-01-15 15:38:40
2.9K0
发布2018-01-15 15:38:40
举报
文章被收录于专栏:练小习的专栏

组织表格列的交互状态一直是很头疼的事情,他不像行那样有天然的tr包裹可控,只有一个虚无缥缈的col元素可以操作,而且原生的col样式在操作的时候也是有各种坑。 在做表格的列的hover效果的时候,尝试了控制col用纯css,最终因为各种bug放弃,最终无奈只好用js来实现。 要实现的效果如demo: 矛盾点:单元格高度联动,border的实现

代码语言:js
复制
<!DOCTYPE html>
<html>
<head>
    <mata charset="utf-8" />
    <title>表格列的hover状态与选中状态 - 练小习的前端技术笔记</title>
    <script src="https://imgcache.qq.com/open/qcloud/js/version/201408/jquery.201408191328.js"></script>
</head>
<body>
<div class="box">
							<!---->
							<style>
							*{
								padding: 0;
								margin: 0;
							}
							.box{
								margin: 50px auto;
								width: 1000px;
							}
							.data-v{
    padding-left: 87px;
    border-left: #d3d3d3 1px solid;
    border-right:0 ;
    font-size: 14px;
}
.data-v table{
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    width: 100%;
    position: relative;
}
.data-v .data-v-head td{
    border-bottom: #d3d3d3 1px solid;
}
.data-v .data-v-head div{
    height: 100px;
    box-sizing: border-box;
    padding: 25px 0 0 0;
}
.data-v .data-v-head div h3{
    font-size: 20px;
    margin-bottom: 10px;
}
.data-v .data-v-head div span{
    color: #666;
}
.data-v td{
    height: 40px;
    text-align: center;
    border-left:#d3d3d3 1px solid;
    background-clip: padding-box;
    position: relative;
    box-sizing: border-box;
    padding: 10px;
    cursor: pointer;
}
.data-v td div{
}
.data-v tr td:last-child{
    border-right: #d3d3d3 1px solid;
}
.data-v tr td:first-child{
    background-color: #fff;
    border-left: none;
    text-align: left;
    width: 130px;
    cursor: default;
}
.data-v tr td:first-child:after{
    position: absolute;
    content: '';
    border-bottom: #f0f2f5 1px solid;
    bottom:0px;
    left: 0px;
    width: 129px;
}
.data-v tr td:first-child h4{
    position: absolute;
    width: 206px;
    top: -1px;
    left: -87px;
    font-size: 14px;
    color: #999;
    border-top: #d3d3d3 1px solid;
    padding: 10px 0 0 10px;
}
.data-v tr:nth-child(2n){
    background-color: #f0f2f5;
}
.data-v tr:first-child td{
    border-top: #d3d3d3 1px solid;
}
.data-v tr:first-child td:first-child:after{
    position: absolute;
    content: '';
    border-bottom: #d3d3d3 1px solid;
    top:-1px;
    left: -87px;
    width: 207px;
    height: 0px;
}
.data-v tr:last-child td:first-child{
    border-bottom: 0;
}
.data-v tr:last-child td:first-child:after{
    position: absolute;
    content: '';
    border-bottom: #d3d3d3 1px solid;
    bottom:-1px;
    left: -87px;
    width: 217px;
    height: 0;
}
.data-v tr:last-child td{
    border-bottom: #d3d3d3 1px solid;
}
/*hover start*/
.data-v tr td.hover{
    border-left: #2277da 1px solid;
    border-right:#2277da 1px solid;
}
.data-v tr:first-child td.hover{
    border-top: #2277da 1px solid;
    background-color: #e8f1fb;
    border-bottom: #bbd5f4 1px solid;
}
.data-v tr:first-child td.hover h3{
    color: #4d8bdf;
}
.data-v tr:last-child td.hover{
    border-bottom: #2277da 1px solid;
}
/*hover end*/
/*当前态 start*/
.data-v tr td.selected{
    border-left: #2277da 1px solid;
    border-right:#2277da 1px solid;
}
.data-v tr:first-child td.selected{
    border-top: 0;
    background-color: #e8f1fb;
    border-bottom: #bbd5f4 1px solid;
}
.data-v tr:first-child td.selected:after{
    position: absolute;
    content: '';
    border: #2277da 1px solid;
    border-bottom: 0;
    height: 10px;
    width: 100%;
    top: -10px;
    left:-1px;
    background-color: #e8f1fb;
}
.data-v tr:first-child td.selected h3{
    color: #4d8bdf;
}
.data-v tr:last-child td.selected{
    border-bottom: #2277da 1px solid;
}
.data-v tr:last-child td.selected:after{
    position: absolute;
    content: '';
    background-image: url(https://www.chengrang.com/demo/icon18.png);
    width: 32px;
    height: 32px;
    bottom: 0;
    right:0;
}
/*当前态 end*/
/*当前态 end*/
								@-moz-document url-prefix(){
									.data-v tr:first-child td:first-child:after{
										top:-2px;
									}
									.data-v tr:first-child td.selected:after{
										width: calc(100% + 1px);
										left:-2px;
									}
								}
							</style>
							<div class="data-v">
								<table>
									<tr class="data-v-head">
										<td><div></div></td>
										<td>
											<div>
												<h3>标题节点</h3>
												<span>练小习的说明</span>
											</div>
										</td>
										<td>
											<div>
												<h3>标题节点</h3>
												<span>练小习的说明</span>
											</div>
										</td>
										<td>
											<div>
												<h3>标题节点</h3>
												<span>练小习的说明</span>
											</div>
										</td>
										<td>
											<div>
												<h3>标题节点</h3>
												<span>练小习的说明</span>
											</div>
										</td>
									</tr>
									<tr class="data-v-row">
										<td>
											<h4>类型节点</h4>
											<div>
												类型标题
											</div>
										</td>
										<td>
											<div>99%</div>
										</td>
										<td>
											<div>99.9%</div>
										</td>
										<td>
											<div>99.99%</div>
										</td>
										<td>
											<div>100%</div>
										</td>
									</tr>
									<tr class="data-v-row">
										<td>
											<div>类型标题</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
									</tr>
									<tr class="data-v-row">
										<td>
											<div>练小习类型标题</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
									</tr>
									<tr class="data-v-row">
										<td>
											<div>类型标题</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
										<td>
											<div>练小习高度随内容自适应调整高度随内容自适应调整高度随内容自适应调整高度随内容自适应调整高度随内容自适应调整高度随内容自适应调整高度随内容自适应调整</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
									</tr>
									<tr class="data-v-row">
										<td>
											<h4>类型节点</h4>
											<div>
												类型标题
											</div>
										</td>
										<td>
											<div>99%</div>
										</td>
										<td>
											<div>99.9%</div>
										</td>
										<td>
											<div>99.99%</div>
										</td>
										<td>
											<div>100%</div>
										</td>
									</tr>
									<tr class="data-v-row">
										<td>
											<div>类型标题</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
									</tr>
									<tr class="data-v-row">
										<td>
											<div>类型标题</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
									</tr>
									<tr class="data-v-row">
										<td>
											<div>类型标题</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
									</tr>
									<tr class="data-v-row">
										<td>
											<div>类型标题</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
									</tr>
									<tr class="data-v-row">
										<td>
											<h4>类型节点</h4>
											<div>
												类型标题
											</div>
										</td>
										<td>
											<div>99%</div>
										</td>
										<td>
											<div>99.9%</div>
										</td>
										<td>
											<div>99.99%</div>
										</td>
										<td>
											<div>100%</div>
										</td>
									</tr>
									<tr class="data-v-row">
										<td>
											<div>类型标题</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
									</tr>
									<tr class="data-v-row">
										<td>
											<div>类型标题</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
										<td>
											<div>练小习撰写新文章</div>
										</td>
									</tr>
								</table>
							</div>
							<!---->
							<script>
								(function(){
									var $data = $('.data-v');
									$data
											.on('click','td',function(){
										var index =  $(this).index();
										$(this).closest('table').find('tr').each(function(cont,tr){
											$(tr).find('td').each(function(i,item){
												if(i==index&&i!=0){
													$(item).addClass('selected')
												}else {
													$(item).removeClass('selected')
												}
											})
										})
									})
											.on('mouseenter','td',function(){
												var index =  $(this).index();
												$(this).closest('table').find('tr').each(function(cont,tr){
													$(tr).find('td').each(function(i,item){
														if(i==index&&i!=0){
															$(item).addClass('hover')
														}else {
															$(item).removeClass('hover')
														}
													})
												})
											})
											.on('mouseleave','td',function(){
												$data.find('.hover').removeClass('hover')
											})
								})();
							</script>
						</div>
</div>
</body>
</html

提示:你可以先修改部分代码再运行。

有这方面经验的大牛们指教,出一个纯css的思路,感谢…..

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档