转:javascript 动态改变表格列的宽度!

最新推荐文章于 2024-04-24 09:22:16 发布
最新推荐文章于 2024-04-24 09:22:16 发布
阅读量2.4k 收藏 2
点赞数
分类专栏： 技术类 文章标签： javascript html vbscript function div class

(1)

 <HTML>      
  <HEAD>      
  <META     NAME="GENERATOR"     Content="Microsoft     FrontPage     4.0">      
  <TITLE></TITLE>      
  <Script     Language=VbScript>      
  '//****************************************      
  '蒋玉龙编制于2002-8-6     星期二      
  'QQ:66840199      
  '用时5个小时，功能：实现首行根据边框调整表格大小；      
  '请保留相关信息      
  '//****************************************      
  Dim     CurState     '记录鼠标状态      
  Dim     CurDown     '记录鼠标按下      
  Dim     CurId     '记录当前Id      
  Dim     OldPlace,NewPlace      
     
  Sub     MoveCol(MyColId)      
  window.status     =window.document.body.scrollLeft      
  If     CurDown=False     Then     '鼠标没有按下      
                        If     window.event.x     +     window.document.body.scrollLeft     >     CurTable     +     window.document.body.all(CurId).offsetLeft     +     window.document.body.all(CurId).offsetWidth-3     Then      
                        '移动到了相应的部位/改变鼠标      
                                                CurState=True      
                                                window.document.body.style.cursor="move"      
                        Else      
                                                CurState=False      
                                                window.document.body.style.cursor="Default"      
                        End     If      
  CurId=MyColId      
  End     If      
  End     Sub      
     
  Sub     UpBody()     '鼠标抬起/一切恢复原状态      
  If     CurState=True     Then      
  '***************************调整表格**************************      
                        '调整条件:(层左侧+线左侧=线绝对左侧坐标)>目标的左侧坐标+20      
                                                NewPlace=window.event.x     +     window.document.body.scrollLeft      
                        If     (MyDiv.offsetLeft     +     MyLine.offsetLeft)     >     CurTable     +     window.document.body.all(CurId).offsetLeft     +20     Then      
                                                window.document.body.all(CurId).Width     =     window.document.body.all(CurId).Width     -     (OldPlace     -     NewPlace)      
                                                MyTable.width=MyTable.Width     -     (OldPlace     -     NewPlace)      
                                                window.document.body.all(CurId).innertext=window.document.body.all(CurId).Width      
                        End     If      
  '*************************************************************      
                        CurState=False      
                        CurDown=False      
                        MyDiv.style.display="None"      
                        window.document.body.style.cursor="Default"      
  End     If      
  End     Sub      
     
  Sub     DownBody()     '鼠标按下      
  If     CurState=True     Then      
                        CurDown=True      
                        '*********定位竖线**********      
                        MyDiv.style.display=""                         '层可见      
                        MyLine.style.Height=     MyTable.offsetHeight      
                        MyLine.style.width     =     1      
                        MyDiv.style.Left     =     window.event.x     +     window.document.body.scrollLeft     -     MyLine.offsetLeft          
                        MyDiv.style.Top     =     MyTable.offsetTop     -     MyLine.offsetTop          
                        '***************************      
                        OldPlace=window.event.x     +     window.document.body.scrollLeft      
  End     If      
  End     Sub      
     
  Sub     MoveBody()     '鼠标移动      
                        If     CurDown=True     Then     '鼠标按下状态      
                                                MyDiv.style.Left     =     window.event.x     +     window.document.body.scrollLeft     -     MyLine.offsetLeft      
                                                window.document.body.style.cursor="move"      
                        End     If      
  End     Sub      
     
  Sub     SelectBody()     '鼠标选择文本[不支持动态调整？]      
                        If     CurDown=True     Then     '鼠标按下于调整状态      
                                                window.event.returnvalue=False      
                        End     If      
  End     Sub      
  </Script>      
  </HEAD>      
  <BODY     οnmοusedοwn=DownBody()     OnMouseOver=MoveBody()     OnMouseUp=UpBody()     onselectstart=SelectBody()>      
  <DIV     Id=MyDiv     style="DISPLAY:     none;     HEIGHT:     201px;     LEFT:     12px;     POSITION:     absolute;     TOP:     50px;     WIDTH:     28px;     Z-INDEX:     1">      
  <hr     Id=MyLine     width="1"     size="200"     noshade     Color="black">      
  </DIV>      
  <TABLE     Id=MyTable     border=0     cellPadding=0     cellSpacing=0     width="300">      
        <TR     Id=MyRow01>      
                <TD     Width="100"     Id="MyCol01"     οnmοusemοve="MoveCol     'MyCol01'">01</TD>      
                <TD     Width="100"     Id="MyCol02"     οnmοusemοve="MoveCol     'MyCol02'">02</TD>      
                <TD     Width="100"     Id="MyCol03"     οnmοusemοve="MoveCol     'MyCol03'">03</TD></TR>      
        <TR     Id=MyRow02>          
                <TD>04</TD>      
                <TD>05</TD>      
                <TD>06</TD></TR>      
        <TR     Id=MyRow03>      
                <TD>07</TD>      
                <TD>08</TD>      
                <TD>09</TD></TR>      
        <TR>      
                <TD>10</TD>      
                <TD>11</TD>      
                <TD>12</TD></TR>      
  </TABLE>      
  <SCRIPT     Language=vbScript>      
  Dim     CurTable      
  CurTable=MyTable.offsetLeft      
     
  Dim     TabII,TabJJ      
  Dim     CurWidth      
  For     TabII=0     To     (MyTable.Rows.length-1)      
        For     TabJJ=0     To     (MyTable.Rows(TabII).cells.length-1)      
                If     MyTable.Rows(TabII).cells(TabJJ).innerHtml=""     Then      
                        MyTable.Rows(TabII).cells(TabJJ).innerHtml="&nbsp;"      
                End     If      
                CurWidth="1"      
                If     TabII=0     Then     '第一行      
                        CurWidth="2"      
                End     If      
                MyTable.Rows(TabII).cells(TabJJ).Style.bordertop=CurWidth     &     "px     solid     Black"      
                CurWidth="1"      
                If     TabJJ=0     Then     '第一列      
                        CurWidth="2"      
                End     If                      
                MyTable.Rows(TabII).cells(TabJJ).Style.borderleft=CurWidth     &     "px     solid     Black"      
                If     TabII=(MyTable.Rows.length-1)     Then     '最后一行      
                        MyTable.Rows(TabII).cells(TabJJ).Style.borderbottom="2px     solid     Black"      
                End     If      
                If     TabJJ=(MyTable.Rows(TabII).cells.length-1)     Then     '最后一列      
                        MyTable.Rows(TabII).cells(TabJJ).Style.borderright="2px     solid     Black"      
                End     If                      
        Next      
  Next      
  </SCRIPT>      
  </BODY>      
  </HTML>      

(2)

<HTML><HEAD><TITLE>信息列表</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
</head>
<style>
.aline{
 position:absolute;
 width:1px;
 height:100px;
 background-color:#000000;
}
.headdiv{
 width:100%;
 cursor:default;
 height:100%;
 white-space:nowrap;
 text-align:center;
 text-valign="middle";
}
tr{
 background: window;
}
td{
 color: windowtext; font: menu; padding: 1px; padding-left: 5px; padding-right: 5px;
 border-top: 1px solid buttonhighlight;
 border-left: 1px solid buttonhighlight;
 border-right: 1px solid buttonshadow;
 border-bottom: 1px solid buttonshadow;
}
table{
 BORDER-COLLAPSE: collapse;
 border-top: 1px solid buttonshadow;
 border-left: 1px solid buttonshadow;
}
thead td{
 background: buttonface;
 font: menu;
 border: 1px outset white;
 cursor: default;
 padding:0 3 0 0;
 border-top: 1px solid buttonhighlight;
 border-left: 1px solid buttonhighlight;
 border-right: 1px solid buttonshadow;
 border-bottom: 1px solid buttonshadow;
 height:16px;
}
</style>
<script language="javascript">
/**
* 动态改变列宽度的代码
* 作者：黑旋风（QQ：23929003 EMAIL:lewclear97@163.com）
* 版权没有，随便拷贝、修改，不过希望大家能把改后的代码发给我一份，互相学习，谢谢
*/
var ListTitleTdStartX=null;//记录鼠标按下时的X坐标
var ListTitleTdStartWidth=0;//记录所在td在鼠标按下时的宽度
var ListTableStartWidth=0;//记录整个table的宽度
var MouseIsDown=false;//表示是否处于鼠标按下状态
var ListTableResizeTd=null;//记录所操作的td对象
var ListResizeLine=null;
/**
*鼠标按下时触发的事件
*其作用主要是记录所需部件的初始值
*/
function MouseDownResizeTd(obj){
  if(event.srcElement.id!="resizehead"){
   return;
  }
  allleft=event.srcElement.offsetLeft+obj.parentElement.parentElement.parentElement.offsetLeft;
  if(setOperatorTd(obj,allleft)){//设置操作的td
   ListResizeDiv=ListTableResizeTd.parentElement.parentElement.parentElement;//外层div
   ListTitleTdStartX=event.x;  //记录初始值
   ListTitleTdStartWidth=parseInt(obj.clientWidth);
   ListTableStartWidth=parseInt(ListTableResizeTd.parentElement.parentElement.parentElement.clientWidth)
   MouseIsDown=true;
   ListResizeLine=document.createElement("div");
   ListResizeLine.className='aline';
   document.body.appendChild(ListResizeLine);
   ListResizeLine.style.height=ListResizeDiv.offsetHeight
   ListResizeLine.style.left=document.body.scrollLeft+event.x-2;
   ListResizeLine.style.top=ListResizeDiv.offsetTop;
   ListTableResizeTd.setCapture();
  }
}
/**
* 判断哪个才是所要操作的td
* 成功获得返回true，否则返回false
*/
function setOperatorTd(obj,allleft){
 if(event.x-allleft<3){//如果按到的是下一个td
    tableobj=obj.parentElement.parentElement.parentElement;
    for(var i=0;i<tableobj.rows.length;i++){    
     if(tableobj.rows[0].cells[i]==obj){
      if(i==0)return false;
      ListTableResizeTd=tableobj.rows[0].cells[i-1];
      return true;
     }
    }
  }else{
   ListTableResizeTd=obj;
   return true;
  }
}
/**
*双击设置最合适宽度
*/
function setMinWidthForTd(){
 ListTableResizeTd.style.width='20px'
}
/**
*鼠标松开将一切参数还原
*/
function document.onmouseup(){
  if(MouseIsDown){
  width=event.x-ListTitleTdStartX;
  if(Math.abs(width)>2&&width+ListTitleTdStartWidth>0){
   ListTableResizeTd.style.width=ListTitleTdStartWidth+width;
   //ListTableResizeTd.parentElement.parentElement.style.width=ListTableStartWidth+width;
  }
  //参数全部还原
  ListTitleTdStartX=null;
  ListTitleTdStartWidth=0;
  ListTableStartWidth=0;
   MouseIsDown=false;
   document.body.removeChild(ListResizeLine);
 }
 if(ListTableResizeTd!=null){
   ListTableResizeTd.releaseCapture();
 }
}
/*
*鼠标移动时改变td及所在table的宽度
*/
function document.onmousemove(){
 if(MouseIsDown){
  ListResizeLine.style.left=document.body.scrollLeft+event.x-2;
 }
}
</script>
<BODY>
 <table border=1 cellpadding="0" cellspacing="0" onselectstart="return false;" >
  <thead>
   <tr id="testtr">
     <Td id="resizehead" style="width:20px;cursor:col-resize;overflow:none;" onDblClick="setMinWidthForTd()" onMouseDown="MouseDownResizeTd(this)"><div class="headdiv">姓名</div></td>
     <Td id="resizehead" style="cursor:col-resize;" onDblClick="setMinWidthForTd()" onMouseDown="MouseDownResizeTd(this)"><div class="headdiv">性别</div></td>
     <Td id="resizehead" style="cursor:col-resize;" onDblClick="setMinWidthForTd()" onMouseDown="MouseDownResizeTd(this)"><div class="headdiv">电话</div></td>
     <Td id="resizehead" style="cursor:col-resize;" onDblClick="setMinWidthForTd()" onMouseDown="MouseDownResizeTd(this)"><div class="headdiv">住址</div></td>
     <Td id="resizehead" style="cursor:col-resize;" onDblClick="setMinWidthForTd()" onMouseDown="MouseDownResizeTd(this)"><div class="headdiv">政治面貌</div></td>
     <Td id="resizehead" style="cursor:col-resize;" onDblClick="setMinWidthForTd()" onMouseDown="MouseDownResizeTd(this)"><div class="headdiv">学历</div></td>
     <Td id="resizehead" style="cursor:col-resize;" onDblClick="setMinWidthForTd()" onMouseDown="MouseDownResizeTd(this)"><div class="headdiv">备注</div></td>
    <script language="javascript">
    for(i=0;i<10;i++){
   var html=' <tr id="testtr">';
      html+='<Td>人员'+i+'</td>';
      html+='<Td>男</td>';
      html+='<Td>45345</td>';
      html+='<td>asdfasfasfasfasdf</td>';
      html+='<td>sffdfgdgd</td>';
    html+='<td>sfdgdfgdfg</td>';
      html+='<td>asdfasfasfasfasdfdfgdfg</td>';
     html+='</tr> ';
     document.write(html);
    }
   </script></tr>
 </thead>
 
 </table>
  </BODY>
</HTML>

javascript 动态改变表格列的宽度

给力地板油
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
原生js实现table表格列宽自由缩放
小妖666个人笔记
12-08 1404
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>table</title> </head> <body> <div style="width: 80%;overflow-x: scroll;margin: 40p...
x-spreadsheet:基于 Web 的 JavaScript（画布）电子表格-开源
07-17
这是一个建立在 Web(es6) 画布上的轻量级 Excel 开发库。 这些参数在第一次实例化时加载，也可以稍后设置，但建议提前修改并加载您需要更改的更改。 可以调整默认显示的列数len，AZ，每列默认宽度，左序列列默认宽度width，每列默认最小宽度minWidth。 您可以调整表格渲染的样式。 其中一些功能包括撤消和重做、绘制格式、清除格式、格式、字体、字体大小、粗体字体、斜体字体、下划线、删除线、文本颜色、填充颜色、边框、合并单元格、对齐、文本换行、冻结单元格、函数、调整行高、列宽、复制、剪切、粘贴、自动填充、插入行、列、删除行、列、隐藏行、列、多个工作表、打印和数据验证。
突破编程_前端_JS编程实例（自适应表格列宽）
突破编程
03-08 1003
前端 JS 编程实例：自适应表格列宽
原生JS实现table列宽调整
weixin_42689830的博客
02-13 811
table
使用xlsx.js导出为excel，并实现自适应列宽
热门推荐
云帆的博客
03-11 1万+
使用的js库：xlsx.js 思路： 计算每一列所有单元格的文本长度(包括列头)，取最大值作为列宽 代码： getCellWidth为核心方法，用于计算单元格宽度的 如果包含中文，则宽度为：文本长度2.1，否则为：文本长度1.1，这个是我多次测试得到的数值 可以在此方法增加其他规则 function getCellWidth(value) { // 判断是否为null或undefined if (value == null) { return 10 } else if (/.*[\u4e
js 拖动表格框线调整列宽
我见青山多妩媚,料青山见我应如是
09-22 1585
js 拖动表格框线调整列宽
原生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表格单元格自动变大,JS实现网页表格自动变大缩小的方法
weixin_35101659的博客
05-30 544
本文实例讲述了JS实现网页表格自动变大缩小的方法。分享给大家供大家参考。具体分析如下：这就是一个个性的动态表格效果代码，网页中的表格自动放大或者缩小，不停的变化主要就是一个强调显示的作用js会动的表格.cellstyle {COLOR: #ffffff; FONT-FAMILY: Times; FONT-SIZE: 11pt; FONT-WEIGHT: bold}A {COLOR: #ff0000...
JS可调整列宽表格
yangqianyu222的专栏
07-29 521
当表格宽度缩减时，自动隐藏单元格内容，并创建div通过title显示完整的单元格内容。 该表格应用时必须定义width才能正常使用，有没有什么办法改进这个缺陷。而且当放入frame框架中使用时，变得不是很灵敏。...
动态改变表格列宽 js实现
03-04
很实用的动态改变表格列宽，就像Excel一样，可以自由伸缩
js实现html表格列宽可拖拽修改
04-04
js实现html表格列宽可拖拽修改 .
[email protected]版本 拖动列 动态改变列宽大小实现
05-16
vue-easytable表格老版本有表格列宽拖功能，但是最新版插件反而不存在该功能，但是大部分表格数据存在...若将ve-table封装以组件形式引用，可全局实现拖动表格列 改变列宽大小效果。如何封装我也会在资源内详细说明。
javascript表格控件：Chgrid，简化型
12-10
2：支持列宽度的拖放 3：支持自定义函数 4：支持分页 5：支持自动编号 6：多浏览器支持，支持ie6,ie7,ff,opera 7：div布局 已知问题： 1：由于使用的div布局，如果使用margin或者padding会改变定义的列宽度，...
程序天下:JavaScript实例自学手册
07-08
9.20 动态改变表格列宽 9.21 动态改变表格的行顺序 9.22 动态生成包含合并单元格的表格 9.23 用键盘上下键实现表格行的上下选择 9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放...
colResizable:jQuery插件来调整表列的大小
05-05
特征由于未找到具有以下列出的功能的其他类似插件，因此开发了colResizable： 与鼠标和触摸设备（PC，平板电脑和手机）兼容与百分比和基于像素的表格布局兼容调整列大小不会改变表格的总宽度（可选） 不需要外部资源...
一个小时学习javaScript
weixin_43064364的博客
04-20 892
JavaScript 是一种广泛使用的编程语言，最初被设计来增加网页的交互性，让用户能够与网页上的元素进行互动。自从1995年被引入以来，JavaScript已经发展成为Web开发中不可或缺的一部分，并且其用途已经大大扩展到了网页之外。
vue2---修饰符
最新发布
weixin_45503872的博客
04-24 985
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
JEECG表格选中状态怎么去掉
weixin_39031037的博客
04-19 557
官网代码（在取消选中状态的时候不生效）
html表格宽度拖拽,原生js实现 拖拽改变 table表格列宽
06-12
// 鼠标移动时改变列宽度 table.addEventListener("mousemove", function (e) { if (!isResizing) { return; } var cell = e.target.parentElement; var cellIndex = Array.from(cell.parentElement.children)...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值