`
xf_zhanghaidong
  • 浏览: 28316 次
  • 性别: Icon_minigender_1
  • 来自: 襄樊
社区版块
存档分类
最新评论

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

    博客分类:
  • JS
阅读更多
<html> 
<title>table拖动(兼容Firefox 3.5/IE6),固定表格宽度</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<style type="text/css"><!-- 
.bg { 
font-size:12px; 
color:#000000; 
table-layout:fixed;//这个属性可以隐藏文字 
} 
.bg td{ 
font-size:12px; 
color:#000000; 
text-align:left; 
line-height:15px; 
height:20px; 
} 
.bg td.tit{ 
background-color:#e2e2e2; 
color:#000; 
height:17px; 
text-align:center; 
line-height:15px; 
} 
.bg td.num{ 
background-color:#e2e2e2; 
color:#000; 
text-align:right; 
line-height:15px; 
height:22px; 
width:30px; 
} 
.resizeDivClass{ 
text-align:right; 
width:3px; 
margin:0px 0 0px 0; 
background:#fff; 
border:0px; 
float:right; 
cursor:e-resize; 
} 
--></style> 
<script type="text/javascript"><!-- 
window.onload=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.onmousedown=function(){return false;}; 
o.onmousedown=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.onmousemove=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.onmouseup=function(){ 
if(o.releaseCapture) 
o.releaseCapture(); 
else if(window.captureEvents) 
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
d.onmousemove=null; 
d.onmouseup=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> 

 
<div id="my"></div> 
<div id="my2"></div> 
</body> 
</html> 

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

<html> 
<title>拖动列宽的表格</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<style type="text/css"><!-- 
.bg td{ 
    font-size:12px; 
    text-align:left; 
    line-height:15px; 
    height:20px; 
} 
.bg td.tit{ 
background-color:#e2e2e2; 
height:17px; 
    text-align:center; 
    line-height:15px; 
} 
.bg td.num{ 
background-color:#e2e2e2; 
    text-align:right; 
    line-height:15px; 
    width:30px; 
    height:22px; 
} 
.resizeDivClass{ 
text-align:right; 
width:1px; 
margin:0px 0 0px 0; 
background:#fff; 
border:0px; 
float:right; 
cursor:e-resize; 
} 
--></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].onclick=function(){ 
            if(this.x!="1"){ 
            }else{ 
                this.x="0"; 
                this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b; 
            } 
        } 
        t[i].onmouseover=function(){ 
            if(this.x!="1")this.style.backgroundColor=c; 
        } 
        t[i].onmouseout=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"><!-- 
//senfe("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景"); 
theObjTable("theObjTable","#c0c0c0","#fff","#a3a2a2"); 
// --></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>
分享到:
评论

相关推荐

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

    table拖动(兼容Firefox 3.5/IE6),固定表格宽度 table拖动(兼容Firefox 3.5/IE6),固定表格宽度 序号 公司名称 订单客户 部门 业务员 交款方式 1 软件开发网 jb51.net 广告部 王天一 现金 ...

    可通过鼠标拖动调整表格单元格宽度效果代码[兼容IE,firefox]

    "可通过鼠标拖动调整表格单元格宽度效果代码[兼容IE,firefox]"这个标题所描述的是一种增强用户界面的技术,它允许用户通过鼠标直接拖动来改变表格中单元格的宽度,从而更好地适应显示需求。这种功能在数据展示和分析...

    Iframe高度自适应(兼容IE/Firefox、同域/跨域)

    "Iframe高度自适应(兼容IE/Firefox、同域/跨域)"这一主题是关于如何让内嵌在Iframe中的页面能够根据其内容动态调整自身的高度,确保在不同浏览器(如IE和Firefox)以及处理同域和跨域情况时都能正常显示。...

    javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)

    首先创建html页面为sort.html ,并把下面的内容复制进去 代码如下: &lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... &lt;head&gt; &lt;... charset=utf-8″ /&gt; &lt;.../ti

    大麦内部版抢购脚本8.5.0.docx

    大麦内部版抢购脚本8.5.0是一个基于JavaScript的自动抢票脚本,使用了UserScript语法并且整合了jQuery库来实现自动提交订单的功能。 知识点1:UserScript语法 UserScript是一种特殊的JavaScript脚本,它可以在...

    浏览器兼容 谷歌IE8.js,IE9.js下载

    `IE8.js`着重于解决IE8中的兼容性问题,这个版本的IE对很多现代JavaScript特性支持不足,如函数对象的`addEventListener`和`removeEventListener`方法,以及对JSON的支持。`IE8.js`会模拟这些特性,使开发者能够使用...

    1_大麦内部版抢购脚本15.6.0.docx

    大麦抢票脚本15.6.0 本文将对大麦抢票脚本15.6.0进行深入解读,涵盖脚本的基本信息、UserScript注解、页面样式和逻辑实现等多方面内容。 基本信息 大麦抢票脚本15.6.0是一个基于UserScript的自动抢票脚本,旨在...

    firefox浏览器驱动+selenium,firefox浏览器驱动+selenium,使用firefox浏览器自动化测试

    Firefox浏览器驱动与Selenium的结合,为实现这一目标提供了强大的工具。本文将深入探讨如何使用Firefox浏览器驱动与Selenium进行自动化测试,以及相关的技术要点。 首先,Selenium是一个开源的Web应用程序自动化...

    鼠标拖动表格改变宽度,动态Ajax数据排序示例.rar

    这个"鼠标拖动表格改变宽度,动态Ajax数据排序示例.rar"压缩包提供了一个实用的JavaScript和Ajax实现,允许用户通过鼠标操作来改变表格列宽以及进行动态数据排序,极大地提升了用户体验。以下是关于这个示例中的关键...

    google鼠标经过JS特效,IE/FF兼容

    标题中的"google鼠标经过JS特效,IE/FF兼容"指的是一个JavaScript实现的特效,它在鼠标悬停(mouseover)某个元素时,会触发一个特定的动画效果,即上部的图片从小到大闪动出现。这个特效适用于谷歌浏览器(Google ...

    CSS实现圆角边框代码 兼容IE、火狐.docx

    早期,为了在不同浏览器(如IE、火狐)间实现圆角边框的兼容性,开发者会使用图片或者JavaScript来实现,但随着CSS3的普及,现在我们可以通过CSS直接定义圆角边框,而无需额外的图片或脚本支持。 以下介绍两种无...

    鼠标拖动调整table列宽实例

    实例中的DEMO页面会展示一个已经实现了拖动调整列宽功能的表格,用户可以通过鼠标左键点击列边框并拖动来改变列的宽度。这个功能的实现通常包括以下几个步骤: 1. **选择元素**:使用`document.querySelector`或`...

    stealth.min.js

    在使用Selenium时候,有些Selenium的特征可能会被网站所识别,然后就不准我们正常访问。该文件可以隐藏Selenium的身份特征的,从而达到成功访问网站的效果。 读者们也可以在这里获取,但是需要科学:...

    js css 表格样式统一修改

    //2 引入脚本&lt;script src="../js/SetTableCss.js" type="text/javascript"&gt;&lt;/script&gt; //3 加入代码(可对多个表格统一设置样式) // &lt;script type="text/javascript"&gt; // window.onload = function() { // TableCss...

    PNG.zip_icons_javascript

    开发者通常会确保他们的网页在主要浏览器上都能正常工作,包括Chrome、Firefox、Safari和Edge。 在压缩包的子文件列表中只看到“PNG”,这意味着包内可能包含一系列命名有序的PNG图像文件,这些文件可能代表不同...

    PHP实例开发源码—jQuery 祝福 许愿墙 开源版发布,兼容 IE,Firefox.zip

    4. 兼容性处理:jQuery提供了跨浏览器的解决方案,确保在IE和Firefox等不同浏览器上运行一致。 从压缩包中的“使用须知.txt”来看,这份文档可能包含了项目部署、配置、使用方法等相关信息,对于开发者或运维人员来...

    javascript实现动态增加删除表格行(兼容IE/FF)

    ### JavaScript 实现动态增加删除表格行(兼容 IE/FF) #### 概述 在 Web 开发中,动态地增加或删除表格行是一项常见的需求。这项技术可以极大地提高用户体验,使得用户能够根据自己的需要来调整表格内容。本文将...

Global site tag (gtag.js) - Google Analytics