表格列冻结

最新推荐文章于 2024-07-19 21:11:59 发布

weixin_30375427

最新推荐文章于 2024-07-19 21:11:59 发布

阅读量93

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/justSmile2/p/9872770.html

版权

代码

<!DOCTYPE html>
<html>
<head>   
    <title>表格的冻结列实现</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #tableDiv{
            width:500px;
            overflow:auto;
        }
        table td{
            padding: 6px;
        }
        table{
            border-collapse: collapse;
        }
        table tr td:last-child{
            right: 172px;
        }

    </style>    
</head>
<body>
    <div id="tableDiv">
        <table>
            <tr>
                <td>start</td>
                <td>start1</td>
                <td>start2</td>
                <td>start3</td>
                <td>start4</td>
                <td>start5</td>
                <td>start6</td>
                <td>start7</td>
                <td>start8</td>
                <td>endendendendend9</td>
            </tr>
            <p>11111111111</p>
        </table>
    </div>
    <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){            
            $("#tableDiv").scroll(function(){
                var left=$("#tableDiv").scrollLeft();
                var trs=$("#tableDiv table tr");
                    $.each(trs,function(i,v){
                        $(v).children().eq(0).css({    
                            "position":"relative",
                            "top":"0px",
                            "left":left,
                            "background-color":"red"
                        });
                        $(v).children().eq(1).css({    
                            "position":"relative",
                            "top":"0px",
                            "left":left,
                            "background-color":"red"
                        });
                                                
                        
                        $(v).children().eq(9).css({    
                            "position":"relative",
                            "top":"0px",
                            "right":172-parseInt(left)+"px",
                            "background-color":"red"
                        });
                    });        
            });
        });

    </script>
</body>
</html>