javascript中用鼠标改变列宽

最新推荐文章于 2024-04-24 09:22:16 发布
最新推荐文章于 2024-04-24 09:22:16 发布
阅读量513 收藏
点赞数
文章标签： javascript function null border class html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bxf0011/article/details/1583825
版权
<!DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.0   Transitional//EN">  
  <HTML>  
  <HEAD>  
  <TITLE>   New   Document   </TITLE>  
  <style>  
  .tabletitle   {  
  font:   icon;  
  color:   buttontext;  
  background:   threedhighlight;  
  border-top:1px   solid   #000000;  
  border-right:   1px   solid   #000000;  
  border-left-style:   solid;  
  border-bottom-style:   none;  
  border-left-width:   1px;  
  border-left-color:   #000000;  
  }  
  .tabletitleTD   {  
  background:   #0099FF;  
  overflow:hidden;  
  height:15;  
  border-left:1px   solid   buttonhighlight;  
  border-right:1px   solid   buttonshadow;  
  border-top:1px   solid   buttonhighlight;  
  border-bottom:1px   solid   buttonshadow;  
  color:   #FFFFFF;  
  }  
  .tableAct   {  
  background:   #FFFFFF;  
  font:   icon;  
  color:   buttontext;  
  border-right:   1px   solid   threedshadow;  
  }  
  .tableAct   TD{  
  border-left:   1px   solid   buttonshadow;  
  }  
  .tdwbar{  
  cursor:w-resize;  
  background:buttonface;  
  behavior:url(dragline.htc);  
  }  
  .tt   {  
  background-color:   #FFFFFF;  
  border-top:   1px   none   #666666;  
  border-right:   1px   none   #666666;  
  border-bottom:   1px   solid   #666666;  
  border-left:   1px   none   #666666;  
  white-space:   nowrap;  
  }  
  .myscroll{FONT-SIZE:   12px;SCROLLBAR-HIGHLIGHT-COLOR:   #FFFFFF;SCROLLBAR-SHADOW-COLOR:   #e1e1e1;SCROLLBAR-3DLIGHT-COLOR:   #e1e1e1;SCROLLBAR-TRACK-COLOR:   white;   SCROLLBAR-DARKSHADOW-COLOR:   white; scrollbar-Base-Color:   white;   scrollbar-arrow-Color:}  
  </style>  
  <SCRIPT   LANGUAGE="JavaScript">  
  <!--  
  function   TTable(name){  
          this.name=name;  
  this.cols=new   Array();  
  this.rows=new   Array();  
  this.items=new   Array();  
  this.colcount=0;//实际是列输减一  
  this.rowcount=0;  
  this.data=new   Array();  
  //style  
  this.width=100;//colum   width  
  this.bgc="#e7e7e7";  
  this.fontfamily="tahoma,arial,helvetica";  
          //method  
  this.addData=addData;  
  this.trimData=trimData;  
  this.create=create;  
  this.display=display;  
  this.refresh=refresh;  
  }  
  function   TItem(owner,name,data,rindex,cindex,width,bgc,ftc){  
          this.owner=owner;  
  this.name=name;  
  this.data=data;  
  this.rindex=rindex;  
  this.cindex=cindex;  
  this.width=width||owner.width;  
  this.bgc=bgc||owner.bgc;  
  this.htmlcode=!rindex?'/n<TD   width="100"   class="tabletitleTD"   >'+data+'</TD>/n<TD   width="2"   rowspan="'+owner.colcount+'"   class="tdwbar"   ></TD>':'/n<TD   class="tt">'+data+'</TD>';  
  }  
   
  function   addData(){  
          var   arg=addData.arguments;  
          var   len=arg.length;  
  this.colcount=Math.max(this.colcount,len);  
          var   tmpdata=new   Array();  
  for(i=0;i<this.colcount;i++){  
          tmpdata[i]=!arg[i]?'':arg[i];  
  }  
  this.data[this.data.length]=tmpdata;  
  }  
  function   trimData(){  
          for(i=0;i<this.data.length;i++){  
          for(j=0;j<this.colcount;j++){  
          this.data[i][j]=!this.data[i][j]?'&nbsp;':this.data[i][j];  
  }  
  }  
  }  
  function   create(){  
          for(i=0;i<this.data.length;i++){  
          this.items[i]=new   Array;  
  for(j=0;j<this.colcount;j++){  
          this.items[i][j]=new   TItem(this,this.data[i][j],this.data[i][j],i,j)  
  }  
          }  
  }  
  function   display(){  
          this.htmlcode='';  
  this.htmlcode+='/n<div   id="MainBG"   style="position:absolute;   left:100px;   top:180px;   z-index:1;   ;border:   1px   none   #000000;overflow:auto;"   class=myscroll>'  
                                            +'/n<div   id="TableBG"   style="position:absolute;   left:0px;   top:0px;   z-index:2;   border:   1px   none   #000000">'  
    +'/n<TABLE     border="0"   cellPadding="0"   cellSpacing="0"     class="tabletitle"   id="tb1">';  
   
  for(i=0;i<this.data.length;i++){  
          this.htmlcode+='/n<tr>';  
          for(j=0;j<this.colcount;j++){  
        this.htmlcode+=this.items[i][j].htmlcode;  
  }  
  this.htmlcode+='/n</tr>';  
          }  
  this.htmlcode+='</table></div></div>';  
  // alert(this.htmlcode)  
  document.write(this.htmlcode)  
  }  
  /*******************     drag   function     ************************/  
  function   TDrag(){  
        this.x1=null;  
        this.x2=null;  
        this.obj=null;  
        this.tableW=null;  
        this.tdW=null;  
        this.table=null;  
        this.targetTD=null;  
  }  
  function   getTdSid(sid){  
        var   targetSID=sid-1;  
        while(document.all[targetSID].tagName!='TD'){targetSID--}  
        return   targetSID  
  }  
  function   mDown(){  
          oDrag.obj=window.event.srcElement;  
          if(oDrag.obj.tagName=='TD'&&oDrag.obj.rowSpan!=1){  
            document.body.style.cursor="e-resize";  
          var   targetSID=getTdSid(event.srcElement.sourceIndex);  
                  oDrag.targetTD=document.all[targetSID];  
  oDrag.table=event.srcElement.parentElement.parentElement.parentElement;  
          oDrag.tableW=table.clientWidth;  
          oDrag.x1=event.x  
  }else{  
          oDrag.obj=null;  
          return   false  
  }  
  }  
  function   mMove(){  
        if(!oDrag.obj)return   false;  
        try{  
        if(window.event.x>=(MainBG.offsetLeft+MainBG.clientWidth))return   false;  
  oDrag.x2=event.x;  
  var   dW=oDrag.x2-oDrag.x1;  
  oDrag.targetTD.style.width=oDrag.targetTD.clientWidth+dW  
  oDrag.table.style.width=dW+oDrag.tableW;//------------>!!!  
  }  
  catch(x){}  
  }  
  function   mUp(){  
      document.body.style.cursor="default";  
      oDrag.obj=null;  
  }  
  function   refresh(){  
        table=TableBG.children[0]  
        TableBG.style.width=table.clientWidth;  
        TableBG.style.height=table.clientHeight;  
        MainBG.style.width=(TableBG.clientHright>=500)?500:TableBG.clientWidth;  
        MainBG.style.height=(TableBG.clientHright>=500)?500:TableBG.clientHeight+16;//默认,高度超过500px使用滚动  
  }  
  function   dragInit(){  
                oDrag=new   TDrag();  
        document.onmousedown   =   mDown  
        document.onmousemove   =   mMove  
        document.onmouseup   =   mUp;  
  }  
  //-->  
  </SCRIPT>  
  </HEAD>  
   
  <BODY   οnlοad="dragInit()">  
   
  <SCRIPT   LANGUAGE="JavaScript">  
  <!--  
  ot=new   TTable();  
  ot.addData('name','email','phoneCode','address','homepage','oicq')  
  ot.addData('llrock','llrock@chinaren.com','123456789','Beijing','user1.7host.com/ccrock','1234567')  
  ot.addData(1,2,3,4)  
  ot.addData(1,2,'',4,5,6)  
  ot.addData(1,2,3,4,5)  
  //ot.data=[[1,2,3,4],2,3]  
  ot.trimData()  
  ot.create()  
  ot.display()  
  ot.refresh()  
  //-->  
  </SCRIPT>  
  </BODY>  
  </HTML>   
 
bxf0011
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
table实现列宽的拖动效果
05-04
NULL 博文链接：https://jifeng3321.iteye.com/blog/2403674
js 鼠标拖动自由调节表格的列宽
liujizhong的专栏
09-09 3096
鼠标拖动调整列宽的js程序，大体的要求是控制table的总宽度不变，拖动表格列的时候只改变当前列和它之后相邻列的宽度，其他的表格列不受影响。 实现思路：每一列中用一个span来响应拖动事件，在onmousemove事件中计算当前列和其后相邻列的宽度变化并赋予每列新的宽度值。   代码如下： table{ border-left:1px solid black; wi
HTML表格单元格控制文本长度，超出部分显示省略号
文程序公子的博客
05-10 3605
1 固定单元格宽度 这种效果采用css实现。单元格(td)的设置和块(div)有一点不同，前者不能直接设置width，要首先将表格布局（table-layout）设为固定（fixed），然后再设置单元格宽度，否则文字仍然会把单元格撑开。单元格宽度只需设置表头元素就可以作用于整列。 <style> /*隐藏多余文字*/ table{ /*将表格布局设为fixed，默认是auto*/ table-layout: f
bootstrap 可以拖动 表格宽度_table表格列宽可拖动
weixin_39875028的博客
02-15 744
table编号姓名性别生日民族001test0011989-03-06汉//用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题var tTD;var table = document.getElementById("tableWidth");for (j = 0; j < table.rows[0].cells.length; j++) {table.rows[0].cell...
JavaScript实现的数据表格：冻结列、调整列宽和客户端排序
深海软件信息技术服务网【云中*深海】
07-17 782
 根据网上的一些脚本改的，大家看一下，应该对开发有用，准备在.Net下写个Server-Side端控件把下面的代码另存为.htm文件后看下效果。数据表格BODY {    FONT: 12px 细明体; CURSOR: default}TD {    FONT: 12px 细明体; CURSOR: default}.title {    BORDER-RIGHT: #555 1px solid
原生JS鼠标拖动修改表格的列宽
大牛的博客
11-20 2166
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
html表格自适应
06-28 3346
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>table</title> <style> .style1 { overflow: hidden; overflow: hidden; white-space:nowra...
javascript实现鼠标拖动改变层大小的方法
10-24
主要介绍了javascript实现鼠标拖动改变层大小的方法,涉及javascript操作鼠标事件及样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
javascript实现禁止鼠标滚轮事件
10-23
主要介绍了javascript实现禁止鼠标滚轮事件的相关资料,需要的朋友可以参考下
firefox中用javascript实现鼠标位置的定位
10-30
firefox中用javascript实现鼠标位置的定位
javascript监听鼠标滚轮事件浅析
10-25
主要介绍了javascript监听鼠标滚轮事件浅析,使用具体例子说明,同时考虑了不同的浏览器,需要的朋友可以参考下
javascript 鼠标滚轮事件
10-30
由于鼠标滚轮事件在 IE 和 FF 的实现有点不一样，所以有需要把这个写成一个统一可用的事件。
java web可以拖动表格单元格大小的html，鼠标拖动改变表格大小（系列三）
黑色头发
08-12 473
效果图：拖动红色的竖杠，可以左右拖动表格宽度，上下宽度一起改变 特点：拖动容易，aaa列的文字拖动后不会被覆盖，ddd列的文字会被表格线覆盖     代码： &lt;style&gt; .resizeDivClass { position:relative; background-color:red; width:2; z-index:1; left:expression(this.parentE...
一个小时学习javaScript
weixin_43064364的博客
04-20 934
JavaScript 是一种广泛使用的编程语言，最初被设计来增加网页的交互性，让用户能够与网页上的元素进行互动。自从1995年被引入以来，JavaScript已经发展成为Web开发中不可或缺的一部分，并且其用途已经大大扩展到了网页之外。
JEECG表格选中状态怎么去掉
weixin_39031037的博客
04-19 589
官网代码（在取消选中状态的时候不生效）
vue2---修饰符
最新发布
weixin_45503872的博客
04-24 1002
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
JavaScript 高性能编程 —— Data Access 数据访问
cccloveforever的博客
04-20 1515
经典计算机科学的一个问题是确定数据应当存放在什么地方，以实现最佳的读写效率。数据存储在哪里， 关系到代码运行期间数据被检索到的速度。在 JavaScript 中，此问题相对简单，因为数据存储只有少量方 式可供选择。正如其他语言那样，数据存储位置关系到访问速度。每一种数据存储位置都具有特定的读写操作负担。大多数情况下，对一个直接量和一个局部变量数据访 问的性能差异是微不足道的。访问数组项和对象成员的代价要高一些，具体高多少，很大程度上依赖于浏 览器。
vue 实现级联选择器功能
清音的博客
04-22 504
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
vue-manage-system 更新，后台管理系统开发更简单
林鑫
04-22 397
近期进行了一次版本升级，主要是支持了更多功能、升级依赖版本和优化样式，并且上线了网站，大部分功能都有文档或者使用示例，更加适合新手上手开发，只需要根据实际业务简单修改，就可以完成产品需求。
鼠标拖动改变div列宽和行高
07-15
要实现鼠标拖动改变div列宽和行高，你可以使用JavaScript和CSS来完成。下面是一种实现方式： 1. 首先，在HTML中创建一个包含多个div的容器，每个div代表一个列或行。例如，创建一个id为"container"的div容器，并在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值