<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脚本,并使其实现在不同浏览器之间兼容,需要考虑到浏览器对JavaScript、CSS属性的不同支持程度,以及对于HTML标记的兼容性处理。通过合理的脚本编写以及对CSS样式的调整,...
"可通过鼠标拖动调整表格单元格宽度效果代码[兼容IE,firefox]"这个标题所描述的是一种增强用户界面的技术,它允许用户通过鼠标直接拖动来改变表格中单元格的宽度,从而更好地适应显示需求。这种功能在数据展示和分析...
### Firefox浏览器兼容JS脚本详解 #### 一、概述 随着Web技术的不断发展与进步,JavaScript作为前端开发的重要组成部分,在不同浏览器之间的兼容性问题显得尤为关键。本文将围绕Firefox浏览器与Internet Explorer...
2. **火狐Firefox浏览器驱动**: 对于Firefox,我们需要`geckodriver`。同样,确保下载的`geckodriver`版本与Firefox浏览器版本兼容。可以在Mozilla的GitHub仓库(https://github.com/mozilla/geckodriver/releases...
首先创建html页面为sort.html ,并把下面的内容复制进去 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <... charset=utf-8″ /> <.../ti
<script type="text/javascript" src="./babel/browser.min.js"></script> <script type="text/babel"> </script> </body> 在页面引入browser-polyfill脚本: <script type="text/javascript" src="./babel/...
大麦内部版抢购脚本8.5.0是一个基于JavaScript的自动抢票脚本,使用了UserScript语法并且整合了jQuery库来实现自动提交订单的功能。 知识点1:UserScript语法 UserScript是一种特殊的JavaScript脚本,它可以在...
标题 "firefox-gooreplacer.zip" 暗示我们讨论的是一个Firefox浏览器的扩展插件,其主要功能是拦截和重定向URL以及修改HTTP请求头(headers)。这个插件可能被设计用于用户隐私保护、网络过滤或者自定义网络访问行为...
`IE8.js`着重于解决IE8中的兼容性问题,这个版本的IE对很多现代JavaScript特性支持不足,如函数对象的`addEventListener`和`removeEventListener`方法,以及对JSON的支持。`IE8.js`会模拟这些特性,使开发者能够使用...
大麦抢票脚本15.6.0 本文将对大麦抢票脚本15.6.0进行深入解读,涵盖脚本的基本信息、UserScript注解、页面样式和逻辑实现等多方面内容。 基本信息 大麦抢票脚本15.6.0是一个基于UserScript的自动抢票脚本,旨在...
Firefox浏览器驱动与Selenium的结合,为实现这一目标提供了强大的工具。本文将深入探讨如何使用Firefox浏览器驱动与Selenium进行自动化测试,以及相关的技术要点。 首先,Selenium是一个开源的Web应用程序自动化...
6. **浏览器兼容性**:针对IE、Firefox和Chrome等不同浏览器,可能需要针对其特性进行特定的代码优化和适配。例如,对于IE,可能需要使用条件注释或polyfill来兼容旧版本的JavaScript API。 7. **响应式设计**:...
鼠标键盘动作脚本执行器 0.353绿色免费版更多精彩,欢迎来我的论坛逛逛! 快乐论坛630 http://hanranran.5d6d.com/bbs.php 快乐网赚论坛 http://wangzhuan630.5d6d.com/bbs.php 中国网赚论坛 ...
下面我们将深入探讨这个话题,并结合描述中的关键标签"Js"、"css"以及"动态改变表格宽度",详细介绍相关知识点。 首先,JavaScript(简称JS)是Web开发中的主要脚本语言,用于处理客户端的交互逻辑。在这个例子中,...
标题中的"google鼠标经过JS特效,IE/FF兼容"指的是一个JavaScript实现的特效,它在鼠标悬停(mouseover)某个元素时,会触发一个特定的动画效果,即上部的图片从小到大闪动出现。这个特效适用于谷歌浏览器(Google ...
反编译工具。具体使用教程可以参见:http://www.lizenghai.com/archives/898.html
IE(Internet Explorer)浏览器曾经是市场上的主流,因此对于IE的JS调试工具的研究也具有实际价值。虽然目前IE的市场份额已经显著下降,但在某些特定行业或企业环境中,它仍然被广泛使用。了解如何在IE中调试...
`JQuery-tableDnD` 是一个用于实现表格元素拖放功能的 jQuery 插件,它使得用户可以通过鼠标拖拽来重新排序表格行,从而增强交互性和用户体验。在这个插件的帮助下,开发人员可以轻松地创建具有动态排序功能的数据...
实例中的DEMO页面会展示一个已经实现了拖动调整列宽功能的表格,用户可以通过鼠标左键点击列边框并拖动来改变列的宽度。这个功能的实现通常包括以下几个步骤: 1. **选择元素**:使用`document.querySelector`或`...