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

2024-10-26 18:15:15

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

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

序号	公司名称	订单客户	部门	业务员	交款方式
1	我们	jb51.net	广告部	王天一	现金

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

上面代码是本人从网上搜集的，并非本人编写，特此声明。

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

拖动列宽的表格

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

序号	公司名称	订单客户	部门	业务员	交款方式
1	中国电信	订单客户名称	广告部	王天一	现金
2	中国移动	订单客户名称	营销部	李小红	信用卡
3	中国联通	订单客户名称	市场部	王老二	银行卡

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

下面是通过htc来实现的。

可通过拖动改变列宽的表格

title1我们	title2jb51.net	title3	title4
content11	content12	content13	content14
content21	content22	content23	content24
content31	content32	content33	content34

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

注意上面的代码，需要下载htc文件

js实现悬浮窗效果(支持拖动)

经常可以看到大部分的官网有右侧悬浮在线客服.今天来写写! 效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js悬浮窗代码(支持拖动)</title> <meta name="descriptio
js实现鼠标拖动功能

效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div{ width: 200px; height: 200px; background: green; position: absolute; } #div2{ width:
使用ExtJS技术实现的拖动树结点

一.结点拖放的位置拖放结点包含了两个动作,拖(drag)和放(drop).拖很好理解,就是将结点拖起来,拖哪一个结点的效果都是一样的.不过放结点就比较复杂了.放结点可分为如下两种情况: 追加(append)结点:如果将拖动的结点正好放在非叶子结点的上面,TreePanel组件会将这个结点移动到非叶子结点下面作为该结点的子结点.由于TreePanel的限制,叶子结点不能append. 在同一层做上下移动(above和below): 如果将拖动的结点放在叶子结点上,或放在非叶子结点的侧面,会将拖动
js 鼠标拖动对象可让任何div实现拖动效果

js鼠标拖动对象: 复制代码代码如下: //定义鼠标拖动对象 drag=function (a,o){ var d=document;if(!a)a=window.event; if(!a.pageX)a.pageX=a.clientX; if(!a.pageY)a.pageY=a.clientY; var x=a.pageX,y=a.pageY; if(o.setCapture) o.setCapture();
利用javascript移动div层-javascript 拖动层

利用javascript移动div层-javascript 拖动层: 程序功能:利用javascript开发在界面上随意拖动以下html code中的div层. javascript移动div层-javascript 拖动层代码-html code: 复制代码代码如下: <div id="div_Info" style="display: none; dz-index: 101; left: 175px; width: 650px; position: absolut
javascript 事件处理、鼠标拖动效果实现方法详解

先看看要拖动的层(模拟窗口)的效果图吧. 要实现的拖动效果:鼠标左键在窗口上方的标题栏上按下,同时移动鼠标,窗口跟着移动.窗口: 复制代码代码如下: <div id="win"> <div id="win_header"></div> </div> 一点准备工作: 要让窗口能自由移动,那么窗口的定位(position)应该采用绝对定位(absolute): 给窗口添加标题栏,这里使用一个放在窗口顶部的层实现,同时将标
javascript div 弹出可拖动窗口

/* * 创建弹出div窗口. 1.接口说明:DivWindow(id,title,width,height,content) 构造函数,创建一个弹出窗口对象参数:id 弹出窗口id: title:弹出窗口标题名称: width:弹出窗口宽度 height:弹出窗口高度 content: 弹出窗口显示内容 2.接口说明: closeDivWindow(id) 关闭窗口参数: id 弹出窗口id 3.接口说明:setPopupTopTitleFontColor(PopupTopTitleFon
js实现div在页面拖动效果

本文实例讲述了js实现div在页面拖动效果.分享给大家供大家参考,具体如下: <style type="text/css"> body { margin: 0px; } #div1 { display: none; position: absolute; z-index: 1000; height: 100%; width: 100%; background: #000000; filter:Alpha(opacity=30); } #div2 { display: non
js实现可拖动DIV的方法

随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的windows8 系统的App都可以用js开发了,大家有时间可以去尝试一下. 现在切入正题,说一下js 实现可拖动Div.实现这个功能我们先说一下思路: 1.捕捉鼠标div的mousedown事件 2.捕捉 document的 mousemove事件 3.取消事件然后我们看一下代码: 复制代码代码如
比较精简的Javascript拖动效果函数代码

拖动效果函数演示 by Longbill.cn body { font-size:12px; color:#333333; border : 0px solid blue; } div { position : absolute; background-color : #c3d9ff; margin : 0px; padding : 5px; border : 0px; width : 100px; height:100px; } function drag(o,s) { if (typeof

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

相关推荐

随机推荐

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