美文网首页
固定列的表格里处理不在一个层级的行样式

固定列的表格里处理不在一个层级的行样式

作者: 追风筝的一朵云 | 来源:发表于2019-08-12 15:23 被阅读0次

//固定列hover一整行

    $(function(){

        $('.hr-table-main .hr-table-body .tr-line').mousemove(function(){

            var a = $(this).index()+1;

            $(this).addClass('rowHover').siblings().removeClass('rowHover');

            $('.left-fixedTable').find('.tr-line').eq(a).addClass('rowHover').siblings().removeClass('rowHover');

            $('.right-fixedTable').find('.tr-line').eq(a).addClass('rowHover').siblings().removeClass('rowHover');

        })

        $('.left-fixedTable .hr-table-body .tr-line').mousemove(function () {

            var a = $(this).index() + 1;

            $(this).addClass('rowHover').siblings().removeClass('rowHover');

            $('.hr-table-main').find('.tr-line').eq(a).addClass('rowHover').siblings().removeClass('rowHover');

            $('.right-fixedTable').find('.tr-line').eq(a).addClass('rowHover').siblings().removeClass('rowHover');

        })

        $('.right-fixedTable .hr-table-body .tr-line').mousemove(function () {

            var a = $(this).index() + 1;

            $(this).addClass('rowHover').siblings().removeClass('rowHover');

            $('.hr-table-main').find('.tr-line').eq(a).addClass('rowHover').siblings().removeClass('rowHover');

            $('.left-fixedTable').find('.tr-line').eq(a).addClass('rowHover').siblings().removeClass('rowHover');

        })

        $('.hr-table-main .hr-table-body .tr-line').mouseleave(function(){

            var a = $(this).index()+1;

            $(this).removeClass('rowHover');

            $('.left-fixedTable').find('.tr-line').eq(a).removeClass('rowHover');

            $('.right-fixedTable').find('.tr-line').eq(a).removeClass('rowHover');

        })

        $('.left-fixedTable .hr-table-body .tr-line').mouseleave(function(){

            var a = $(this).index()+1;

            $(this).removeClass('rowHover');

            $('.hr-table-main').find('.tr-line').eq(a).removeClass('rowHover');

            $('.right-fixedTable').find('.tr-line').eq(a).removeClass('rowHover');

        })

        $('.right-fixedTable .hr-table-body .tr-line').mouseleave(function(){

            var a = $(this).index()+1;

            $(this).removeClass('rowHover');

            $('.hr-table-main').find('.tr-line').eq(a).removeClass('rowHover');

            $('.left-fixedTable').find('.tr-line').eq(a).removeClass('rowHover');

        })

    })

相关文章

  • 固定列的表格里处理不在一个层级的行样式

    //固定列hover一整行 $(function(){ $('.hr-table-main .hr-t...

  • 表格样式归纳

    固定表头 固定列 可伸缩列 基础表格 基础表格有三种样式:斑马纹表格、带边框表格、没有样式区分的表格 不同密度的表...

  • Element中在中的方法执行

    因为有固定列,有几个固定列,会多执行几次,表的固定实现是通过多个表堆叠实现的,所以如果你有存在固定的列,那就会存在多个表

  • CSS:伪类、样式表、多列

    伪类# 样式表### 多列######

  • Region详解

    1 层级结构 Table (HBase 表) Region(表的Regions)Store(Region中以列族为...

  • 零基础学Axure8-表格的运用

    知识点: 1.编辑表格:添加/删除行、列; 2.编辑表格的样式:字体样式,背景,边距,行距; 3.在excel表中...

  • CSS如何工作

    这一节介绍了样式表中元素如何从父级继承样式,以及不同层级的样式如何相互作用决定最终显示效果。教给你通过在样式表中添...

  • HTML5 col标签

    用在表格中,设置每一列的样式 一个表格里面只写一次 style html 效果

  • Excel练习

    1、批量处理行高、列宽 选择要处理的所有行和列,改变一行或一列的行高或列宽即可使所有的行和列变成相同的行高、列宽。...

  • CSS 的基本操作

    CSS(Cascading Style Sheets)层级样式表,是一种用来表现HTML或XML等文件样式的计算机...

网友评论

      本文标题:固定列的表格里处理不在一个层级的行样式

      本文链接:https://www.haomeiwen.com/subject/ogsujctx.html