jQuery表格列寬可變，兼容firfox

本demo使用jQuery包，實現表格列寬可拖拽功能，並實現頁面reset時的重新佈局。使用jQuery，方便函數的調用，給要處理的表格添加id 後，直接調用$("#id").movedTh()即可方便實現，修改了firfox的兼容性。

代碼如下：

[javascript]view
plaincopy

<html>  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">  

<mce:script type="text/javascript" src="jquery-1.3.2.min.js" mce_src="jquery-1.3.2.min.js"></mce:script>  

<mce:style><!--  

.resizeDivClass  

{  

position:absolute;  

background-color:gray;  

width:2px;  

height:15px;  

z-index:1px;  

display: block;  

cursor:e-resize  

}  

.td1 {  

font-size: 12px;  

white-space:nowrap;  

color:#0000ff;    

}  

--></mce:style><style mce_bogus="1">.resizeDivClass  

{  

position:absolute;  

background-color:gray;  

width:2px;  

height:15px;  

z-index:1px;  

display: block;  

cursor:e-resize  

}  

.td1 {  

font-size: 12px;  

white-space:nowrap;  

color:#0000ff;    

}</style>  

<mce:script language=javascript><!--  

/* 

    標題：擴拖拽列表格demo 1.2 

    設計：盧鬆強 

    博客：http://hi.csdn.net/andensy 

    日期：2010年4月26日 

    說明：修改了firfox兼容性問題，可以很好的兼容火狐瀏覽器 

    */  

    /* 

    依賴於jQuery 

    */  

(function($){  

    //用正則表達式判斷jQuery的版本  

    if (/1/.(0|1|2)/.(0|1|2|3|4|5)/.test($.fn.jquery) || /^1.1/.test($.fn.jquery)) {  

     alert('movedTh 需要 jQuery v1.2.6 以後版本支持!  你正使用的是 v' + $.fn.jquery);  

    return;  

    }  

    me=null;  

    var ps=3;  

    $.fn.movedTh=function(){  

        me=this;  

        var target = null;  

        var tempStr = "";  

        var i=0;  

        $(me).find("tr:first").find("th").each(function(){  

        tempStr = '<div id="mydiv'+i+'"οnmοusedοwn="$().mousedone.movedown(event,this)"  ></div>';  

            var div={};  

            $(this).html($(this).html()+tempStr);  

            var offset = $(this).offset();  

            var pos=offset.left +$(this).width()+ me.offset().left-ps;  

            $("#mydiv"+i).addClass("resizeDivClass");  

            $("#mydiv"+i).css("left",pos);  

            $("#mydiv"+i).css("top",(offset.top+2));  

            i++;  

        }); //end each  

    }   //end moveTh  

    $.fn.mousedone={  

        movedown:function(e,obj){  

            var d=document;  

            var e = window.event||e ;  

            var myX = e.clientX||e.pageX;  

                obj.mouseDownX=myX ;  

                obj.pareneTdW=$(obj).parent().width();  //obj.parentElement.offsetWidth;  

                obj.pareneTableW=me.width();  

                if(obj.setCapture){  

                    obj.setCapture();  

                }else if(window.captureEvents){   

                    window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);   

                }  

            d.οnmοusemοve=function(e){  

                var dragData=obj;  

                var event = window.event||e ;  

                if(!dragData.mouseDownX) return false;  

                var newWidth=dragData.pareneTdW*1+(event.clientX||event.pageX)*1-dragData.mouseDownX;  

                    if(newWidth>0)  

                    {  

                        $(obj).parent().width(newWidth);  

                        me.width(dragData.pareneTableW*1+(event.clientX||event.pageX)*1-dragData.mouseDownX);  

                        var k=0;  

                        me.find("tr:first").find("th").each(function(){  

                        var offset = $(this).offset();  

                        var pos=offset.left*1+$(this).width()*1+me.offset().left*1-ps;  

                        $("#mydiv"+k).css("left",pos);  

                        k++;  

                        })  //end each  

                    }//end if  

            };  

            d.οnmοuseup=function(e){  

                var dragData=obj;  

                    if(dragData.setCapture)  

                    {  

                        dragData.releaseCapture();  

                    }else if(window.captureEvents){  

    　　　　            window.releaseEvents(e.MOUSEMOVE|e.MOUSEUP);  

                    }  

                    dragData.mouseDownX=0;  

            }  

        }  

    }   //end mousedone  

    $(window).resize(function(){  

        setTimeout(function() {   

        var target = null;  

        var tempStr = "";  

        var i=0;  

        $(me).find("tr:first").find("th").each(function(){  

        tempStr = '<div id="mydiv'+i+'"οnmοusedοwn="$().mousedone.movedown(event,this)"  ></div>';  

            var div={};  

            $(this).html($(this).html()+tempStr);  

            var offset = $(this).offset();  

            var pos=offset.left +$(this).width()+ me.offset().left-ps;  

            $("#mydiv"+i).addClass("resizeDivClass");  

            $("#mydiv"+i).css("left",pos);  

            i++;  

        }); //end each  

        }, 10);  

    });  

})(jQuery)  

$().ready(function(){  

    $("#tab").movedTh();  

})  

// --></mce:script>  

</head>  

<body οnlοad="">  

<table cellpadding="3" id='' STYLE="table-layout:fixed;" mce_STYLE="table-layout:fixed;" >  

<tr bgcolor=cccccc >  

<th valign=top class="td1" ><nobr>改變table的列寬度改</nobr><span style="color:#069" mce_style="color:#069">|</span></th>  

<th valign=top class="td1" ><nobr>改變table的列寬度改</nobr><span style="color:#069" mce_style="color:#069">|</span></th>  

</tr></table>  

<br>  

<table cellpadding="3" id='tab' STYLE="table-layout:fixed;" mce_STYLE="table-layout:fixed;" >  

<tr bgcolor=cccccc >  

<th valign=top class="td1" ><nobr>改變table的列寬度改</nobr></th>  

<th valign=top class="td1" ><nobr>改變table的列寬度改</nobr></th>  

<th valign=top class="td1" ><nobr>改變table的列寬度改</nobr></th>  

<th valign=top class="td1" ><nobr>改變table的列寬度改</nobr></th>  

<th valign=top class="td1" ><nobr>改變table的列寬度改</nobr></th>  

<th valign=top class="td1" ><nobr>改變table的列寬度改</nobr></th>  

</tr>  

<tr>  

<td class="td1"><nobr>改變table的列寬度</nobr></td>  

<td class="td1"><nobr>改變table的列寬度</nobr></td>  

<td class="td1"><nobr>改變table的列寬度</nobr></td>  

<td class="td1"><nobr>改變table的列寬度</nobr></td>  

<td class="td1"><nobr>改變table的列寬度</nobr></td>  

<td class="td1"><nobr>改變table的列寬度</nobr></td>  

</tr>  

<tr>  

<td class="td1"><nobr>改變table的列寬度</nobr></td>  

<td class="td1"><nobr>改變table的列寬度</nobr></td>  

<td class="td1"><nobr>改變table的列寬度</nobr></td>  

<td class="td1"><nobr>改變table的列寬度</nobr></td>  

<td class="td1"><nobr>改變table的列寬度</nobr></td>  

<td class="td1"><nobr>改變table的列寬度</nobr></td>  

</tr>  

<tr>  

<td class="td1"><nobr>改變table的列寬度</nobr></td>  

<td class="td1"><nobr>改變table的列寬度</nobr></td>  

<td class="td1"><nobr>改變table的列寬度</nobr></td>  

<td class="td1"><nobr>改變table的列寬度</nobr></td>  

<td class="td1"><nobr>改變table的列寬度</nobr></td>  

<td class="td1"><nobr>改變table的列寬度</nobr></td>  

</tr>  

<tr>  

<td class="td1"><nobr>改變table的列寬度</nobr></td>  

<td class="td1"><nobr>改變table的列寬度</nobr></td>  

<td class="td1"><nobr>改變table的列寬度</nobr></td>  

<td class="td1"><nobr>改變table的列寬度</nobr></td>  

<td class="td1"><nobr>改變table的列寬度</nobr></td>  

<td class="td1"><nobr>改變table的列寬度</nobr></td>  

</tr>  

</table>  

</body>  

</html>

更多0

上一篇：一個可拖拽列寬表格demohttp://blog.csdn.net/andensy/article/details/5528944

smeyou

發佈了343 篇原創文章 · 獲贊 10 · 訪問量 153萬+

私信關注

jQuery表格列寬可變，兼容firfox

《Python進階》學習筆記

一個docker容器暴露多個端口

leetcode 60 排列序列

Leetcode 3161. 物塊放置查詢

微服務實踐之使用 Visual Studio 2022 調試Dapr 應用程序

wpf附加屬性理解 WPF附加屬性

windows server 2012 防火牆安全策略限制ip遠程及訪問mysql

.net 調用outlook將msg另存爲txt

正確釋放WORD對象(COM組件) COMException: 被調用的對象已與其客戶端斷開連接

SQL導出數據到EXCEL的問題

用NextResult方法取得多個Result Set

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結