用js实现鼠标拖动控制td宽度

最新推荐文章于 2023-12-07 10:06:40 发布
最新推荐文章于 2023-12-07 10:06:40 发布
阅读量5.6k 收藏 1
点赞数
分类专栏： Javascript HTML 文章标签： border function table

 <html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script>
var dragenable=false;
var x;
var y;
var w;
var h;
var obj;
function init() {

x=event.clientX+document.body.scrollLeft;
obj=event.srcElement;
w=event.srcElement.offsetWidth;
obj.setCapture();
if(x>event.srcElement.offsetLeft+w-5 && x<event.srcElement.offsetLeft+w) {dragenable=true;obj.style.cursor='e-resize';}
}

function drag() {
 if(event.clientX+document.body.scrollLeft>event.srcElement.offsetLeft+event.srcElement.offsetWidth-5 && event.clientX+document.body.scrollLeft<event.srcElement.offsetLeft+event.srcElement.offsetWidth) {event.srcElement.style.cursor='e-resize';}
 else event.srcElement.style.cursor='default';
if(dragenable==true) {
 if(event.clientX+document.body.scrollLeft-x+w>0) {
 var i=obj.cellIndex;
 var j;
 for(j=0;j<obj.parentNode.parentNode.rows.length;j++) {
  obj.parentNode.parentNode.rows[j].cells[i].width=event.clientX+document.body.scrollLeft-x+w;
  }
 }
 else {
  var i=obj.cellIndex;
  var j;
  for(j=0;j<obj.parentNode.parentNode.rows.length;j++) {
   obj.parentNode.parentNode.rows[j].cells[i].width=1;
   }
  }
 }
}

function end() {
dragenable=false;
obj.releaseCapture();
obj.style.cursor='default';
}
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000" leftmargin=0 topmargin=0>
表格宽度未设定或表格宽度白分比显示
<br>
<table width="40%" border="1" cellpadding="0" cellspacing="2" οnmοusedοwn=init() οnmοuseup=end() οnmοusemοve=drag() id=table1 style="table-layout:fixed">
  <tr>
    <td height="18" align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="18" align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="18" align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="18" align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="18" align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="18" align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="18" align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
  </tr>
</table>

<br>
表格宽度设定了<br>
<table border="1" cellpadding="0" cellspacing="2" οnmοusedοwn=init() οnmοusemοve=drag() οnmοuseup=end() id=table2 style="table-layout:fixed" width="500">
  <tr>
    <td width="100" height="18" align="top">dffdksdlkfslfkldka;lsdfksd;lkfd;</td>
    <td width="100" align="top">&nbsp;</td>
    <td width="100" align="top">&nbsp;</td>
    <td width="100" align="top">&nbsp;</td>
    <td width="100" align="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="18" align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="18" align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="18" align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="18" align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="18" align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="18" align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
  </tr>
</table>


</body>
</html>

fableking
关注
专栏目录
任意改变table表格td的宽度 支持表格TD拖拽
09-01
任意改变table表格td的宽度 动态td的宽度 任意改变table表格td的宽度 动态td的宽度 任意改变table表格td的宽度 动态td的宽度
js实现拖动table列，改变列宽
诺言的钟情
03-01 5068
这两天看了一些关于table列拖动的js代码，怕忘记了，贴上来摆着。第一个，这个关于兼容方面应该比较好，不过拖动响应鼠标的事件感觉不是太好：&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt...
原生js实现 拖拽改变 table表格列宽
最新发布
weixin_57456011的博客
12-07 827
【代码】原生js实现 拖拽改变 table表格列宽。
js与jquery实例-拖动改变列宽和行高
xiaozhuangyumaotao的博客
04-17 1084
干货来了，如何通过javascript或者jquery实现改变表格宽度或者行高的功能？今天就把这个功能代码分享给大家，绝对原创哦，代码少而且易懂。先看效果图： html结构： <!DOCTYPEHTML> <html> <head> <metacharset="utf-8"> <title>tabl...
element table 行高列宽拖拽调整
a1361742209的博客
03-17 1375
element table 行高列宽拖拽调整
实现boostrap表格td宽度可自由拖动。
07-28
为了实现"bootstrap表格td宽度可自由拖动"的功能，我们需要借助额外的库或者自定义JavaScript代码来实现。在本场景中，我们关注的关键词是"表格td 自由拉伸"，这通常意味着我们需要实现列宽的动态调整。 首先，我们...
拖动table标题实现改变td的大小(css+js代码)
10-27
3. JavaScript实现拖拽调整宽度 JavaScript部分包括几个关键的函数，用于捕捉鼠标事件并动态调整单元格和表格的宽度。`MouseDownToResize`函数负责捕获鼠标按下事件，并记录鼠标按下的初始位置以及表格列标题的初始...
鼠标拖动改变左右单元格宽度特效代码
03-20
本知识点主要关注如何通过编程实现"鼠标拖动改变左右单元格宽度"的特效代码。这种功能常见于电子表格软件或者自定义的数据展示界面，它为用户提供了一种直观的方式来调整列宽，以便更好地查看和处理数据。 首先，...
主页面中的两个iframe实现鼠标拖动改变其大小
09-05
标题中的“主页面中的两个iframe实现鼠标拖动改变其大小”指的是在网页设计中，如何通过JavaScript和CSS技术，使得用户可以通过鼠标拖动来调整页面内两个iframe元素的宽度。这个功能可以提升用户体验，特别是在需要...
原生JS鼠标拖动修改表格的列宽
大牛的博客
11-20 2395
<!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.
可通过鼠标拖动调整表格单元格宽度效果代码[兼容IE,firefox]
02-19
可通过鼠标拖动调整表格单元格宽度效果代码[兼容IE,firefox]! 可通过鼠标拖动调整表格单元格宽度效果代码[兼容IE,firefox]!
js 鼠标拖动自由调节表格的列宽
liujizhong的专栏
09-09 3168
鼠标拖动调整列宽的js程序，大体的要求是控制table的总宽度不变，拖动表格列的时候只改变当前列和它之后相邻列的宽度，其他的表格列不受影响。 实现思路：每一列中用一个span来响应拖动事件，在onmousemove事件中计算当前列和其后相邻列的宽度变化并赋予每列新的宽度值。   代码如下： table{ border-left:1px solid black; wi
js 表格拖动改变高和宽
上善若水
08-03 742
[code="html"] .resizeDivClass { position:relative; width:4; z-index:1; left:expression(this.parentElement.offsetWidth - 3); cursor:e-resize; } ....
鼠标拖动动态改变表格的宽度的js脚本 兼容ie/firefox
lishaman的专栏
08-30 1783
table拖动(兼容Firefox 3.5/IE6)，固定表格宽度 table拖动(兼容Firefox 3.5/IE6)，固定表格宽度 .bg { font-size:12px; color:#000000; table-layout:fixed
js 实现table每列可左右拖动改变列宽度
热门推荐
zanychou的专栏
07-21 3万+
table 用户编号 试用时间转正时间性别姓名拼音 生日时间民族身高 2000001 1997-3-131997-3-131WZJ 1965-3-13汉171 2000045 2001-2-152001-3-150WY 1978-8-5汉162 2000046 2001-2-232001-3-230LQ 2001-2-23汉171
拖动一个div，动态改变其td宽度的实现
Java程序员专栏
03-16 1175
/*扩充左边树区域宽度 start*/ function configcheck_MouseDownToResize(obj){        obj.mouseDownX=event.clientX;        obj.pareneTdW=obj.parentElement.parentElement.offsetWidth;        obj.setCapture();
拖拽调整左右区域宽度 js库
u011204852的博客
06-16 547
左右两块区域，支持左右拖拽调整两边宽度
js 实现table每列可左右拖动改变列宽度 【转载】
weixin_30388677的博客
12-10 530
<!DOCTYPE HTML> <html> <head> <meta charset="gbk"> <title>table</title> </head> <body> <table id="tb_1" cellspacing="0" cellpadding=...
table拖动改变列宽和行宽
万里飞鹏的博客
08-29 3237
使用jquery原文地址https://www.cnblogs.com/qq545505061/p/9647867.html； 初始话属性设置文档https://www.douban.com/note/86224998/ 最新跟新，table加上属性width:fit-content;td设置初始宽度，这样拖动列宽，table行宽也能跟着动了并且自动产生滚动条，原先table只有table-l...
js实现table用鼠标改变td的宽度，固定table宽度和高度超过显示点
06-07
要实现这个功能，你可以使用JavaScript和CSS来改变table和td元素的样式。 首先，在HTML中，你需要定义一个具有固定宽度和高度的table元素，并在其中添加一些td元素。例如： ```html <style> #myTable { width: 500px; height: 300px; border-collapse: collapse; } #myTable td { border: 1px solid black; width: 100px; height: 50px; } </style> <table id="myTable"> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> </tr> </table> ``` 接下来，你可以使用JavaScript来实现改变td元素的宽度。例如，你可以给每个td元素添加一个mousedown事件监听器，当用户按下鼠标时，将其宽度设置为用户拖动鼠标时的距离。然后，你可以将mousemove和mouseup事件监听器添加到整个文档中，以便在用户拖动鼠标时调整宽度，并在用户释放鼠标时停止调整。 ```javascript var table = document.getElementById("myTable"); var resizing = false; var start = undefined; var startX = undefined; table.addEventListener("mousedown", function(event) { if (event.target.tagName.toLowerCase() === "td") { resizing = true; start = event.target; startX = event.pageX; } }); document.addEventListener("mousemove", function(event) { if (resizing) { var diff = event.pageX - startX; start.style.width = start.offsetWidth + diff + "px"; startX = event.pageX; } }); document.addEventListener("mouseup", function(event) { resizing = false; start = undefined; startX = undefined; }); ``` 最后，如果你想要固定table的宽度和高度，并在内容超出显示范围时添加滚动条，你可以将table元素包装在一个具有固定宽度和高度的div元素中，并将div元素的overflow属性设置为auto或scroll。 ```html <div style="width: 500px; height: 300px; overflow: auto;"> <table id="myTable"> ... </table> </div> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值