表格列的hover状态与选中状态
时间:2022-04-21
本文章向大家介绍表格列的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的思路，感谢…..
- 条码支付迎来分级限额制 支付宝、微信纷纷响应
- 关键基础设施威胁预警，HDD声波攻击可致蓝屏
- 集成学习之随机森林通俗理解
- 深度学习CNN眼中的图片是什么样的
- 第七节 关联映射之多对多
- 词向量fasttext，CNN is All，强化学习，自回归生成模型，可视化神经网络损失函数
- 比特币开始执行比特币支付协议发票减少钱包的支持
- Spring编程式事务处理不当引起的连接泄露事件
- Genaro在硅谷区块链孵化器开幕式上提出愿景
- 支付宝微信回应央行新规：继续探索条码支付新技术！
- 一个猎头的Python学习笔记01
- XMT.com超200万被区块链终端交易
- linux基础（三）
- 去哪儿网如何用“计算”的力量搞地推战
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- c语言之指向指针的指针
- c语言之利用#if #endif来进行注释或者运行不同的主函数
- c++之对组pair
- c++STL容器之set/multiset容器
- c++STL容器之list容器
- c++STL容器之deque容器
- Web自动化必会「Web基础、元素定位、元素操作、Selenium运行原理、项目实战+框架」
- HTML5 meta viewport参数详解
- 二分查找应该都会，那么二分查找的变体呢？
- TypeScript 实战算法系列（三）：实现链表与变相链表
- JavaScript 测试系列实战（一）：使用 Jest 和 Enzyme 测试 React 组件
- TypeScript 实战算法系列（二）：实现队列与双端队列
- VBA位操作
- VBA编写Ribbon Custom UI编辑器07——写入xml
- Linux下在文件夹所有文件中查找相关内容