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

最新推荐文章于 2023-12-07 10:06:40 发布
最新推荐文章于 2023-12-07 10:06:40 发布
阅读量691 收藏 1
点赞数
分类专栏： javascript 文章标签： js

 <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>

yanyuyingjob36
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
任意改变table表格td的宽度 支持表格TD拖拽
09-01
任意改变table表格td的宽度 动态td的宽度 任意改变table表格td的宽度 动态td的宽度 任意改变table表格td的宽度 动态td的宽度
js与jquery实例-拖动改变列宽和行高
xiaozhuangyumaotao的博客
04-17 982
干货来了，如何通过javascript或者jquery实现改变表格宽度或者行高的功能？今天就把这个功能代码分享给大家，绝对原创哦，代码少而且易懂。先看效果图： html结构： <!DOCTYPEHTML> <html> <head> <metacharset="utf-8"> <title>tabl...
js实现的验证，学习用js控制td
12-03
JS日积月累001 – rows 和 cells的使用 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
拖动table标题实现改变td的大小(css+js代码)
12-09
代码如下: <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
table拖拽js
01-12
bootstraptable拖拽js
用js实现鼠标拖动控制td宽度
天涯 书塾
09-12 5653
 Untitled Documentvar 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();
js实现拖动table列，改变列宽
诺言的钟情
03-01 4958
这两天看了一些关于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 387
【代码】原生js实现 拖拽改变 table表格列宽。
element table 行高列宽拖拽调整
a1361742209的博客
03-17 1248
element table 行高列宽拖拽调整
拖动一个div，动态改变其td宽度的实现
lixiaolin77的专栏
03-16 1150
/*扩充左边树区域宽度 start*/ function configcheck_MouseDownToResize(obj){        obj.mouseDownX=event.clientX;        obj.pareneTdW=obj.parentElement.parentElement.offsetWidth;        obj.setCapture();
实现boostrap表格td宽度可自由拖动。
07-28
实现boostrap表格td宽度可以自由拖动。简单易用，内含源代码
jQuery实现鼠标可拖动调整表格列宽度
01-19
实现鼠标可拖动调整表格列宽度 如图： 一、引入文件： 代码如下: [removed][removed] [removed][removed] [removed][removed] 二、TABLE 代码如下: ”myTable” border=”1″> <thead>
jquery左右拖动表格头部改变td的宽度
qq_41468239的博客
07-10 1487
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; table{ border-collapse:collapse; } &lt;/style&gt; &am
实现拖动table标题实现改变td的大小
数据库
04-15 157
&lt;html&gt; &lt;title&gt;拖动列宽的表格&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt; &lt;style type="text/css"&gt;&lt;!-- .bg td{ font-
＜ elementUi 组件插件： el-table表格拖拽修改列宽及行高 及 使用注意事项 ＞
热门推荐
一个平平无奇的技术宅
02-17 1万+
由于项目需求，需要给定原先使用的element列表新增一个列宽动态拖拽功能。结合在网上找到的资源，出一期 “ 使用事项 ” 及 使用过程中的问题汇总
table拖动改变列宽和行宽
万里飞鹏的博客
08-29 3134
使用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，实现拖拽，保存顺序思路
大蘑菇
09-27 319
[code="java"] 拖动 td { width: 20%; height: 20px; border-bottom: 1px solid black; border-right: 1px solid black; cursor: default; } div { font-size: 13px; } th { h...
鼠标放td边线上可以调整宽度
liuhongJAVAEn的专栏
07-13 2114
demo  $(  function()  {    var onSampleResized = function(e)   {    var columns = $(e.currentTarget).find("th");   };      $("#sample2").colResizable({    liveDrag:true,    gripInne
基于java的-28-“智慧食堂”设计与实现--LW-源码.zip
最新发布
04-25
提供的源码资源涵盖了Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 适合毕业设计、课程设计作业。这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。 所有源码均经过严格测试，可以直接运行，可以放心下载使用。有任何使用问题欢迎随时与博主沟通，第一时间进行解答！
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、付费专栏及课程。

余额充值