鼠标拖动动态改变表格的宽度的js脚本兼容ie/firefox

最新推荐文章于 2024-04-24 09:22:16 发布

lishaman

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量1.7k

点赞数

分类专栏： Android开发 java html学习文章标签：脚本 class function border firefox javascript

Android开发同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

java html学习

9 篇文章 0 订阅

订阅专栏

table拖动(兼容Firefox 3.5/IE6)，固定表格宽度

<html>
<title>table拖动(兼容Firefox 3.5/IE6)，固定表格宽度</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css"></style>
<script type="text/javascript"><!--
window.οnlοad=function(){
drag(document.getElementById('drag'));
drag(document.getElementById('drag2'));
drag(document.getElementById('drag3'));
drag(document.getElementById('drag4'));
};
function drag(o,r){
o.p_p_c_gw=function(index)/*取得o.parentNode.parentNode.cells的宽度，兼容IE6和Firefox*/{
if(window.ActiveXObject){
return o.parentNode.parentNode.cells[o.parentNode.cellIndex+index].offsetWidth;
}else{
return parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex+index].offsetWidth)-
parseInt(o.parentNode.parentNode.parentNode.parentNode.cellPadding)*2-2;
}
}

o.p_p_p_sw=function(index,w)/*设置所有行的第index个单元格为w，在IE下可只设第一行*/{
for(var i=0;i<o.parentNode.parentNode.parentNode.parentNode.rows.length;i++) {
o.parentNode.parentNode.parentNode.parentNode.rows[i].cells[index].style.width=w;
}
}

var out=document.getElementById('my');

o.firstChild.οnmοusedοwn=function(){return false;};
o.οnmοusedοwn=function(a){
var d=document;if(!a)a=window.event;
var lastX=a.clientX;
var watch_dog=o.p_p_c_gw(0)+o.p_p_c_gw(1);//有时候拖拽过快表格会变大，至于为什么会这样我也不清楚。watch_dog是为了保证表格不会变大，
if(o.setCapture)
o.setCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
//
d.οnmοusemοve=function(a){
if(!a)a=window.event;
if(o.p_p_c_gw(0)+o.p_p_c_gw(1)>watch_dog){
o.p_p_p_sw(o.parentNode.cellIndex+1,watch_dog-o.p_p_c_gw(0));
return;
}
var t=a.clientX-lastX;out.innerHTML=t;
if(t>0) {//right
if(parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex+1].style.width)-t<10)
return;
o.p_p_p_sw(o.parentNode.cellIndex,o.p_p_c_gw(0)+t);
o.p_p_p_sw(o.parentNode.cellIndex+1,o.p_p_c_gw(1)-t);
} else {//left
if(parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex].style.width)+t<10)
return;
o.p_p_p_sw(o.parentNode.cellIndex,o.p_p_c_gw(0)+t);
o.p_p_p_sw(o.parentNode.cellIndex+1,o.p_p_c_gw(1)-t);
}
lastX=a.clientX;
};
d.οnmοuseup=function(){
if(o.releaseCapture)
o.releaseCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.οnmοusemοve=null;
d.οnmοuseup=null;
};
};
}
// --></script>
<body >
<table class="bg" width="60%" border="1" cellspacing="0" cellpadding="0" bordercolorlight="#7b7b7b" bordercolordark="#efefef" id="theObjTable" >
<tr >
<td class="num" >序号</td>
<td class="tit" >
<span class="resizeDivClass" id="drag"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span>
公司名称
</td>
<td class="tit" >
<span class="resizeDivClass" id="drag2"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span>
订单客户
</td>
<td class="tit" >
<span class="resizeDivClass" id="drag3"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span>
部门
</td>
<td class="tit" >
<span class="resizeDivClass" id="drag4"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span>
业务员
</td>
<td class="tit" >

交款方式
</td>
</tr>
<tr >
<td class="num" >1</td>
<td> <div style="white-space:nowrap;overflow:hidden;width:100%;">脚本之家</div></td>
<td ><div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%">jb51.net</div></td>
<td >广告部</td>
<td >王天一</td>
<td >现金</td>
</tr >
</table>

下面附上两个是IE only的，大家都可以参考下。

<html>
<title>拖动列宽的表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css"></style>
<script language="javascript"><!--
function MouseDownToResize(obj){
    setTableLayoutToFixed();
    obj.mouseDownX=event.clientX;
    obj.pareneTdW=obj.parentElement.offsetWidth;
    obj.pareneTableW=theObjTable.offsetWidth;
    obj.setCapture();
}
function MouseMoveToResize(obj){
if(!obj.mouseDownX) return false;
var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;
if(newWidth>10)
{
    var theObjTable = document.getElementById("theObjTable");
    obj.parentElement.style.width = newWidth;
    theObjTable.style.width=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;
    }
}
function MouseUpToResize(obj){
    obj.releaseCapture();
    obj.mouseDownX=0;
}
function setTableLayoutToFixed()
{
var theObjTable = document.getElementById("theObjTable");
if(theObjTable.style.tableLayout=='fixed') return;
var headerTr=theObjTable.rows[0];
for(var i=0;i<headerTr.cells.length;i++)
{
headerTr.cells[i].styleOffsetWidth=headerTr.cells[i].offsetWidth;
}

for(var i=0;i<headerTr.cells.length;i++)
{
headerTr.cells[i].style.width=headerTr.cells[i].styleOffsetWidth;
}
theObjTable.style.tableLayout='fixed';
}
function theObjTable(o,a,b,c){
    var t=document.getElementById(o).getElementsByTagName("tr");
    for(var i=0;i<t.length;i++){
        t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;
        t[i].οnclick=function(){
            if(this.x!="1"){
            }else{
                this.x="0";
                this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
            }
        }
        t[i].οnmοuseοver=function(){
            if(this.x!="1")this.style.backgroundColor=c;
        }
        t[i].οnmοuseοut=function(){
            if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
        }
    }
}
// --></script>
<body>
<table width="100%" class="bg" border=1 cellspacing=0 bordercolorlight="#7b7b7b" bordercolordark="#efefef" id="theObjTable">
<tr>
<td class="num">序号</td>
<td width="100px" class="tit">
<span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span>
公司名称
</td>
<td class="tit">
<span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span>
订单客户
</td>
<td class="tit">
<span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span>
部门
</td>
<td class="tit">
<span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span>
业务员
</td>
<td class="tit">
<span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span>
交款方式
</td>
</tr>
<tr>
<td class="num" >1</td>
<td >中国电信</td>
<td >订单客户名称</td>
<td >广告部</td>
<td >王天一</td>
<td >现金</td>
</tr>
<tr>
<td class="num" >2</td>
<td >中国移动</td>
<td >订单客户名称</td>
<td >营销部</td>
<td >李小红</td>
<td >信用卡</td>
</tr>
<tr>
<td class="num" >3</td>
<td >中国联通</td>
<td >订单客户名称</td>
<td >市场部</td>
<td >王老二</td>
<td >银行卡</td>
</tr>
</table>
<script language="javascript"></script>
</body>
</html>

下面是通过htc来实现的。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>可通过拖动改变列宽的表格</title>
</head>
<body>
<div style="height:500">
<TABLE border=1 cellspacing=0 cellpadding=0 style="behavior:url(http://img.jb51.net/images/grid.htc);">
    <TR>
        <TD> title1脚本之家</TD>
        <TD> title2jb51.net</TD>
        <TD> title3</TD>
        <TD> title4</TD>
    </TR>
    <TR>
        <TD> content11</TD>
        <TD> content12</TD>
        <TD> content13</TD>
        <TD> content14</TD>
    </TR>
    <TR>
        <TD> content21</TD>
        <TD> content22</TD>
        <TD> content23</TD>
        <TD> content24</TD>
    </TR>
    <TR>
        <TD> content31</TD>
        <TD> content32</TD>
        <TD> content33</TD>
        <TD> content34</TD>
    </TR>
</TABLE>
</div>
</body>
</html>

lishaman

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标拖动动态改变表格的宽度的js脚本兼容ie/firefox

table拖动(兼容Firefox 3.5/IE6)，固定表格宽度 table拖动(兼容Firefox 3.5/IE6)，固定表格宽度 .bg { font-size:12px; color:#000000; table-layout:fixed
复制链接

扫一扫