表格列的hover状态与选中状态
组织表格列的交互状态一直是很头疼的事情，他不像行那样有天然的tr包裹可控，只有一个虚无缥缈的col元素可以操作，而且原生的col样式在操作的时候也是有各种坑。 在做表格的列的hover效果的时候，尝试了控制col用纯css，最终因为各种bug放弃，最终无奈只好用js来实现。 要实现的效果如demo： 矛盾点：单元格高度联动，border的实现
<!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 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
