模仿Excel的窗口冻结功能

最新推荐文章于 2024-07-12 14:33:35 发布

Codelegant

最新推荐文章于 2024-07-12 14:33:35 发布

阅读量907

点赞数

分类专栏： HTML+CSS 文章标签：表格窗口冻结 excel

本文链接：https://blog.csdn.net/elegant_lai/article/details/17248411

版权

//JavaScript部分
        $(function () {
            $("td").each(function (n) {
                this.innerHTML = n;
            });
            $("#content").scroll(function () {
                $("#freezeRow").get(0).scrollLeft = $(this).get(0).scrollLeft;
                $("#freezeCol").get(0).scrollTop = $(this).get(0).scrollTop;
            });
        });

//CSS部分
        table {
        border-collapse:collapse;
        }
        #title {
            width:50px;
            height:40px;
            float:left;
            background-color:red;
        }
        #freezeRow {
            width:333px;
            overflow:hidden;
            float:left;
            background-color:blue;
        }
        #freezeCol {
            width:50px;
            height:283px;
            float:left;
            overflow:hidden;
            background-color:blue;
            clear:both;
        }
        #content {
           width:350px;
           height:300px;
           float:left;
           overflow:scroll;
           position:absolute;
           z-index:-1;
           padding-left:50px;
           padding-top:40px; 
        }

//HTML部分
<body>
<div id="outSide" >
    <div id="title">
        标题栏 
    </div>
    <div id="freezeRow">
<table id="table1" width="600" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
    </div>
    <div id="freezeCol">
<table id="table2"  width="50" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> &l