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

本文介绍了一种使用JavaScript实现表格列的hover和选中状态的方法,解决了单元格高度联动及边框实现等问题,提供了完整的代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

组织表格列的交互状态一直是很头疼的事情,他不像行那样有天然的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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值