固定table第一列

来源：互联网发布：阿里云怎么备案编辑：程序博客网时间：2024/06/05 02:24

表格:为外层div绑定scroll事件

       <div id="freezing" style="overflow:scroll" onscroll="javascript:freezing()">            <table id="timetable">                <thead>                <tr id="tablehead">                    <th></th>                </tr>                </thead>                <tbody id="tablebody">                </tbody>            </table>        </div>

css：设置tr的第一个子元素为相对定位

tr>:first-child{    width : 66px;    position : relative;    border : solid #A4D3EE 1px;}

js:

//固定表格首列function freezing(){    $("tr>:first-child").css("left",$("#freezing").scrollLeft()-1);    var thWidth=$("#tablehead>:first").width();    var step=thWidth/5;//分5次过渡，每step像素过渡一次    var scroLeft=$("#freezing").scrollLeft(); //向左滚动的距离    var tol=Math.ceil(scroLeft/step);    if(scroLeft==0){        $("tr>:first-child").removeClass("isScrolling").css("opacity",1);    }else if(scroLeft>0&&scroLeft<thWidth){        $("tr>:first-child").addClass("isScrolling").css("opacity",0.2*tol);    }else{        $("tr>:first-child").addClass("isScrolling").css("opacity",1);    }}

0 0