分享一个基于jQuery的锁定行列。最后一步了遇到一个小问题，希望大家帮忙。

自然框架 2010-12-27 09:51:28

网上有一些锁定行列，是采用了css的方式，似乎调用的时候有一点点复杂。

我是想弄一个调用简单的，只需要调用一个js函数即可，其他的不用做什么修改。

于是弄了一个，js比较烂，所以借用了一下jQuery。

基本功能和想法都实现了，只是遇到了一个小问题。

========

我的这个锁定行列的优点
1、调用简单，只需要调用一个js函数即可。
2、效率比较高。
3、支持属性、js事件等
4、支持大表格（还未做测试）。


只需要在要锁定的table外面加一个div，
然后在body的 onload 调用一下就可以了。<body onload="myScroll('div_Main','tbl_Main',1,1)">

第一个参数是table外面的div的ID
第二个参数是要锁定的table的ID
第三个是要锁定的行数
第四个是要锁定的列数


========

基本思路
动态创建三个div，在三个div里在动态创建三个table，根据要锁定的table，来设置这三个table。

第一个table，存放锁定的行，第二个存放要锁定的列，第三个存放锁定的行列的重叠的部分。

最后把这三个div放在相应的位置（就是table的上面），这样就可以实现锁定的效果了。

========

遇到的问题

大家都注意看了，这个很重要。

动态创建的div和table，要设置他们的宽度和高度，但是发现设置table的宽高的时候并不准确。

比如我要设置table的高度是300，但是设置完毕之后再读取高度，变成了302。

更郁闷的是设置td的高度的时候，这个误差就更大了。



http://www.naturefw.com/demo/scroll.aspx

这是测试的地址，js代码都在页面里。请大家帮帮忙。




...全文
677 16 打赏 收藏 转发到动态 举报
写回复
用AI写文章
16 条回复
切换为时间正序
请发表友善的回复…
发表回复
sihai201202 2012-06-19
  • 打赏
  • 举报
 回复
楼主可以看看这个里的
http://www.cnblogs.com/sihai6b204/archive/2012/06/19/2554405.html
voice1122 2010-12-28
  • 打赏
  • 举报
 回复
不是很明白，希望楼主指点指点
hp2008001 2010-12-27
  • 打赏
  • 举报
 回复
多谢楼主分享

接分
kevin_520_kevin 2010-12-27
  • 打赏
  • 举报
 回复
我刚自己找了些jQuery的资料自己研究的了，还不会，顺便收藏起来学学...谢谢LZ哦
自然框架 2010-12-27
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 fengyarongaa 的回复:]
有点不知所云
难道是我浏览器问题吗
[/Quote]

你的浏览器没什么问题。

可能你看的表格比较乱，这个就是问题呀。

td的高度设置的不够精确，所以锁定的列和原来的列对于不上。

自然框架 2010-12-27
  • 打赏
  • 举报
 回复 


function SetTableWH(divID,tableID,rowCount,columnCount)

        {

            //设置div、table的宽度高度

            var divMain = $("#" + divID)[0];

            var dTop = $("#" + divID + " tr:first th")[0];

            

            //alert($("#" + divID + " table").height());

            

            var tmpDivWidth;    //div的总宽度

            var tmpDivHeight;   //div的总高度

            

            var tmpRowWidth;    //锁定行的table的宽度

            var tmpRowHeight = 0;   //锁定行的table的高度

            var tmpColWidth = 0;    //锁定列的table的宽度

            var tmpColHeight;   //锁定列的table的高度

            

            tmpDivWidth = $("#" + divID).width();

            tmpDivHeight = $("#" + divID).height();

            tmpRowWidth =$("#" + divID + " table").width();

            tmpColHeight = $("#" + divID + " table").height();

            

            for (i=0;i<rowCount;i++)

            {//锁定行的总高度

                tmpRowHeight += getRowMaxHeight($("#" + divID + " table tr:eq("+i+") td"));

                //alert("总高度_" + i + "_" + tmpRowHeight);

            }

            

            for (i=0;i<columnCount;i++)

            {

                //锁定列的总宽度

                tmpColWidth += $("#" + divID + " table tr:eq(0) td:eq("+i+")").width();

            }

            

          

            //设置行的宽高

            $("#Div_Top").width(tmpDivWidth - 24);

            $("#Tbl_Top").width(tmpRowWidth);

            $("#Div_Top").height(tmpRowHeight);

            $("#Tbl_Top").height(tmpRowHeight);

            

            

            //设置列宽高

            $("#Div_Left").width(tmpColWidth);

            $("#Tbl_Left").width(tmpColWidth);

            

            $("#Div_Left").height(tmpDivHeight - 24);

            $("#Tbl_Left").height(tmpColHeight);

            

            alert($("#Tbl_Left").height() + "_"+ tmpColHeight + "_" + $("#" + divID + " table").height());

           

           

            //交叉的部分

            $("#Div_TopLeft").width(tmpColWidth);

            $("#Tbl_TopLeft").width(tmpColWidth);

            $("#Div_TopLeft").height(tmpRowHeight);

            $("#Tbl_TopLeft").height(tmpRowHeight);

           

           

           

            //设置多顶行的每个td的宽度

            $("#Tbl_Top tr:eq(0) td").each(function (i){

                $(this).width($("#" + divID + " table tr:eq(0) td:eq(" + i + ")").width());

            });

            

            //设置锁定列的每个tr的高度

            /*

            $("#Tbl_Left tr").each(function (i){

                //$(this).height(getRowMaxHeight($("#" + divID + " table tr:eq("+i+") td")));

                //alert($("#" + divID + " table tr(" + i + ")"));

                $(this).height($("#" + divID + " table tr:eq(" + i + ")").height());

            });

            */





            var trIndex = 0;

            var tmpH = 0;

            //var tdIndex = 0; 

            //设置锁定列的每个td的高度

            $("#Tbl_Left tr td").each(function (i){

                trIndex = parseInt(i / columnCount);

                tmpH = $("#" + divID + " table tr:eq(" + trIndex + ") td").height();

                //$(this).height(tmpH);

                this.style.height = tmpH;

                //查看高度

                a = i+ "_" + $(this).height() + "——" + tmpH + ":";

                a += $("#" + divID + " table tr:eq(" + trIndex + ") td").height();

                //alert (a);

            });

            

            alert($("#Tbl_Left").height());

            alert($("#" + divID + " table").height());

            

            



        }

        

        function SetTableXY(divID,tableID,rowCount,columnCount)

        {

            alert("设置位置");

            var divTop=$("#Div_Top")[0];

            var divLeft=$("#Div_Left")[0];

            var divTopLeft=$("#Div_TopLeft")[0];

            

            var offset = $("#"+divID).offset(); //左上角的坐标

            

            divTop.style.top = offset.top;

            divTop.style.left = offset.left;

            divLeft.style.top = offset.top;

            divLeft.style.left = offset.left;

            divTopLeft.style.top = offset.top;

            divTopLeft.style.left = offset.left;

           

        }

        

        function SetTableInfo(divID,tableID,rowCount,columnCount)

        {

            alert("开始复制属性");

            

            //复制三个div的属性

            $("#Div_Top,#Div_Left,#Div_TopLeft").each(function (){

                this.mergeAttributes( $("#"+divID)[0]);

            });

            

            //移除scroll事件

            $("#Div_Top,#Div_Left,#Div_TopLeft").removeAttr("onscroll");

            $("#Div_Top,#Div_Left,#Div_TopLeft").removeAttr("style");

            

            $("#Div_Top,#Div_Left,#Div_TopLeft").attr("style","clear: none; overflow: hidden; width: 0px; height: 0px;POSITION:absolute;LEFT: 100px; TOP: 100px;background-color:#ffffff");

           

            //复制三个table的属性

            $("#Tbl_Top,#Tbl_Left,#Tbl_TopLeft").each(function (){

                this.mergeAttributes($("#"+tableID)[0]);

            });

            

            //复制锁定行的每个tr的属性

            $("#Tbl_Top tr").each(function (i){

                //alert(this.innerHTML);

                this.mergeAttributes($("#"+tableID + " tr:eq("+i+")")[0]);

            });

            

            //复制锁定行的每个td的属性

            var trIndex = 0;

            var tdIndex = 0;

            var tdCount =  $("#"+ tableID +" tr:eq(0) td").length; 

            $("#Tbl_Top td").each(function (i){

                trIndex = parseInt(i / tdCount);

                tdIndex = i % tdCount;

                //alert(i +"_"+ trIndex +"_"+ tdIndex);

                this.mergeAttributes($("#"+tableID + " tr:eq("+trIndex+") td:eq("+ tdIndex +")")[0]);

            });

            

            //复制锁定列的每个tr的属性

            $("#Tbl_Left tr").each(function (i){

                //alert(this.innerHTML);

                this.mergeAttributes($("#"+tableID + " tr:eq("+i+")")[0]);

            });

            

            //复制锁定列的每个td的属性

            trIndex = 0;

            tdIndex = 0;

            $("#Tbl_Left td").each(function (i){

                trIndex = parseInt(i / columnCount);

                tdIndex = i % columnCount;

                //alert(i +"_"+ trIndex +"_"+ tdIndex);

                this.mergeAttributes($("#"+tableID + " tr:eq("+trIndex+") td:eq("+ tdIndex +")")[0]);

            });

            

        }

        

        function divScroll(divMain)

        {

            //alert("外部滚动事件");

            var divTop=$("#Div_Top");

            var divLeft=$("#Div_Left");

            

            //alert(divMain.scrollLeft);

            divTop.scrollLeft(divMain.scrollLeft);

            divLeft.scrollTop(divMain.scrollTop);

            

        }

        

        function getRowMaxHeight(tr)

        {

            //获取指定的行的最大的高度

            //alert(tr.length);

            var maxHeight = 0;

            tr.each(function (){

                //alert($(this).height());

                if ($(this).height() > maxHeight)

                    maxHeight = $(this).height();

            });

            return maxHeight;

        }
自然框架 2010-12-27
  • 打赏
  • 举报
 回复
好像大家都比较忙哎。

这是脚本。



     function myScroll(divID,tableID,rowCount,columnCount)

        {

            alert("开始添加行");

            //copy 三个div和table

            CreatDiv(divID,tableID,rowCount,columnCount)

       

            //copy属性、css和事件

            SetTableInfo(divID,tableID,rowCount,columnCount);

            

            //设置table的宽度和高度

            SetTableWH(divID,tableID,rowCount,columnCount);

            

            //定位

            SetTableXY(divID,tableID,rowCount,columnCount);

            

        }

        

        function CreatDiv(divID,tableID,rowCount,columnCount)

        {

            //锁定行列的三个DIV、三个table

            var DivTop=$("<div></div>");

            var DivLeft=$("<div></div>");

            var DivTopLeft=$("<div></div>");

            

            var TblTop=$("<table></table>");

            var TblLeft=$("<table></table>");

            var TblTopLeft=$("<table></table>");

            

            DivTop.attr("id","Div_Top");//POSITION:absolute;LEFT: 10px; TOP: 10px;

            //DivTop.attr("style","clear: none; overflow: hidden; width: 0px; height: 0px;POSITION:absolute;LEFT: 100px; TOP: 100px;");

            

            DivLeft.attr("id","Div_Left");

            //DivLeft.attr("style","clear: none; overflow: hidden; width: 0px; height: 0px;POSITION:absolute;LEFT: 100px; TOP: 100px;");

            

            DivTopLeft.attr("id","Div_TopLeft");

            //DivTopLeft.attr("style","clear: none; overflow: hidden; width: 0px; height: 0px;POSITION:absolute;LEFT: 100px; TOP: 100px;");

            

            TblTop.attr("id","Tbl_Top");

            TblTop.attr("style","clear: none;  width: 0px; height: 0px;");

            

            TblLeft.attr("id","Tbl_Left");

            TblLeft.attr("style","clear: none;   width: 0px; height: 0px;");

            

            TblTopLeft.attr("id","Tbl_TopLeft");

            TblTopLeft.attr("style","clear: none;  width: 0px; height: 0px;");

            

            //注册事件

           

            

            //alert($("#"+ tableID +" tr:eq(0) td:eq(0)")[0].innerHTML);

            for (i =0;i<rowCount;i++)

            {

                //添加要锁定的行

                TblTop.append("<tr>"+$("#"+ tableID +" tr:eq("+ i +")")[0].innerHTML+"</tr>");

            }

            

            

            //添加要锁定的列

            var tableRowsCount ;

            var tmpTD;

            

            tableRowsCount = $("#"+ tableID +" tr").length;   //.children("tr").length ;

            //alert (tableRowsCount);

            for (a =0;a<tableRowsCount;a++)

            {

                tmpTD="";

                for (b =0;b<columnCount;b++)

                {

                    //添加要锁定的列

                    tmpTD += "<td>" + $("#"+ tableID +" tr:eq("+ a +") td:eq("+ b +")")[0].innerHTML + "</td>";

                    

                }

                

                TblLeft.append("<tr>"+tmpTD+"</tr>");

            }

            

            //添加行列重叠的部分

            if (rowCount + columnCount >1)

            {

                 for (a =0;a<rowCount;a++)

                 {

                    tmpTD="";

                    for (b =0;b<columnCount;b++)

                    {

                        //添加要锁定的列

                        tmpTD += "<td>" + $("#"+ tableID +" tr:eq("+ a +") td:eq("+ b +")")[0].innerHTML + "</td>";

                        

                    }

                    

                    TblTopLeft.append("<tr>"+tmpTD+"</tr>");

                }

            }

             

           

            DivTop.append(TblTop);

            DivLeft.append(TblLeft);

            DivTopLeft.append(TblTopLeft);

            

            

            $("body").append(DivTop);

            $("body").append(DivLeft);

            $("body").append(DivTopLeft);

            

        }
ycproc 2010-12-27
  • 打赏
  • 举报
 回复
有点不知所云
难道是我浏览器问题吗
子夜__ 2010-12-27
  • 打赏
  • 举报
 回复
没人啊 沙发。多谢LZ分享。问题现在打不开 晚上在看
自然框架 2010-12-27
  • 打赏
  • 举报
 回复
我郁闷呀，不过问题总算是算是解决了。
自然框架 2010-12-27
  • 打赏
  • 举报
 回复
upneirongtaiduanle
自然框架 2010-12-27
  • 打赏
  • 举报
 回复
不是把，200分呢。
jQuery矢量SVG地图插件JVectorMap源码程序
JVectorMap是一款基于jQuery的矢量地图插件，它是基于SVG结构的，和其他jQuery地图插件不同的是，jVectorMap是矢量地图。同样支持地图缩放和地图平面移动等相应的功能。由于JVectorMap是基于jQuery的，所以支持大...
实现页码可滚动的jQuery分页插件jPaginate 程序源码
jPaginate是一款基于jQuery的分页插件，这款jQuery分页插件有一个特点，就是随着鼠标点击页码，页码会向前或向后滚动，效果非常不错。而且，这款jQuery分页插件提供了多种样式风格，你也可以自己利用CSS来定义不同的...
jquery.js 工具文件
jquery.js 工具文件
jquery-form.js 源码
异步提交表单和上传文件jquery-form.js
jQuery.ui.1.7.2中文文档
目前已经完成了大部分内容, 希望可以帮助到各位网友.
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章