jQuery表格列寬可拖拽改變且兼容firfox
更新時(shí)間：2014年09月03日 10:04:40 投稿：whsnow
使用jQuery包，實(shí)現(xiàn)表格列寬可拖拽功能，并實(shí)現(xiàn)頁(yè)面reset時(shí)的重新布局，用法及示例如下，感興趣的朋友不要錯(cuò)過
本demo使用jQuery包，實(shí)現(xiàn)表格列寬可拖拽功能，并實(shí)現(xiàn)頁(yè)面reset時(shí)的重新布局。使用jQuery，方便函數(shù)的調(diào)用，給要處理的表格添加id 后，直接調(diào)用$("#id").movedTh()即可方便實(shí)現(xiàn)，修改了firfox的兼容性。
代碼如下：
<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><!--
/*
標(biāo)題：擴(kuò)拖拽列表格demo 1.2
設(shè)計(jì)：盧松強(qiáng)
博客：http://hi.csdn.net/andensy
日期：2010年4月26日
說明：修改了firfox兼容性問題，可以很好的兼容火狐瀏覽器
*/
/*
依賴于jQuery
*/
(function($){
//用正則表達(dá)式判斷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+'"onmousedown="$().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.onmousemove=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.onmouseup=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+'"onmousedown="$().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 onload="">
<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>
相關(guān)文章
jquery 鍵盤事件 keypress() keydown() keyup()用法總結(jié)
在本篇文章里小編給各位整理的是關(guān)于jquery 鍵盤事件 keypress() keydown() keyup()用法總結(jié)以及相關(guān)實(shí)例，需要的朋友們學(xué)習(xí)下。2019-10-10
這篇文章主要介紹了jQuery手機(jī)撥號(hào)界面特效，整體特效非常逼真自然，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
JQuery的ready函數(shù)與JS的onload的區(qū)別詳解
這篇文章主要介紹了JQuery的ready函數(shù)與JS的onload的區(qū)別，有需要的朋友可以參考一下2013-11-11
表單提交的時(shí)候 ，是根據(jù)元素的name這個(gè)屬性來(lái)的，只要不加name屬性 就不會(huì)提交，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈2013-05-05
解決jQuery上傳插件Uploadify出現(xiàn)Http Error 302錯(cuò)誤的方法
這篇文章主要為大家詳細(xì)介紹了解決jQuery上傳插件Uploadify出現(xiàn)Http Error 302錯(cuò)誤的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-12-12
jQuery 是最流行和使用最廣泛的 JavaScript 框架，它簡(jiǎn)化了HTML文檔遍歷，事件處理，動(dòng)畫以及Ajax交互，幫助Web開發(fā)人員更快速的實(shí)現(xiàn)各種精美的界面效果2012-03-03
下面小編就為大家?guī)?lái)一篇深入理解JQuery循環(huán)綁定事件。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-06-06
利用jQuery及AJAX技術(shù)定時(shí)更新GridView的某一列數(shù)據(jù)
這篇文章主要介紹了利用jQuery及AJAX技術(shù)定時(shí)更新GridView的某一列數(shù)據(jù)的方法,這里的GridView是指C#軟件開發(fā)中的GridView控件,需要的朋友可以參考下2015-12-12
jquery.boxy插件的iframe擴(kuò)展2010-07-07
我想將一個(gè)網(wǎng)頁(yè)上的圖片按一定的時(shí)間間隔刷新，不改變圖片的名稱，我在服務(wù)器端改變圖片的內(nèi)容，以此來(lái)實(shí)現(xiàn)動(dòng)態(tài)的效果2012-12-12