本文介绍了一种使用JavaScript实现表格列的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>
扫一扫
863
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
