js实现固定表头，拖动部分内容

最新推荐文章于 2025-06-01 10:16:21 发布

原创最新推荐文章于 2025-06-01 10:16:21 发布 · 3.4k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

零散的技术积累

本文介绍了如何使用JavaScript实现固定表头，同时让拖动的内容与表头保持同步。关键在于利用CSS的overflow属性和JavaScript事件监听。通过创建div并设置样式，将表头与表体分离，然后绑定onscroll事件，更新滚动条位置，以达到拖动内容时表头固定的效果。示例代码包括HTML结构和JavaScript实现。

1.首先了解：如何让内容可拖动

原理很简单，用div的css属性 overflow:scroll

给div设置固定大小，当div的内容超出范围时，会自动出现滚动条，使内容可拖动

2.然后了解：如何让 “连动的内容” 随着 “可拖动的内容” 一起连动

设置滚动条的位置属性 scrollTop, scrollLeft

3.具体步骤：

a. 用div将 “固定内容” ， “连动的内容” ， “可拖动的内容” 分离，并固定大小

b. “连动的内容” 设置div属性 overflow:hidden ; “可拖动的内容” 设置div属性 overflow:scroll

c. 给 “可拖动的内容” 绑定js事件 onscroll="连动div.scrollTop = 可拖动div.scrollTop"

4.将表头与表体分离到div的简洁方式：

用到的html：

<asp:GridView ID="gvProductReport" runat="server"> </asp:GridView>

</div>

用到的js：

function InitGridView()
{
        var div_Head1 = document.getElementById("div_Head1");
        var tableBody1 = document.getElementById("<%= gvProductReport.ClientID %>");
        var tableHead1 = tableBody1.cloneNode(true);
        for(var i=tableHead1.rows.length-1; i>0; i--)
        {
            tableHead1.deleteRow(i);
        }
        tableBody1.deleteRow(0);
        div_Head1.appendChild(tableHead1);
}

window.onload = function(){ InitGridView(); };

标签

#div #scroll #function #server #asp