支持table的td左右移动（支持绝大多数浏览器），建议配合tableoverflow一起用

最新推荐文章于 2024-09-16 08:00:00 发布

tz_gx

最新推荐文章于 2024-09-16 08:00:00 发布

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： j2ee 文章标签： td左右移动 jsp html

本文链接：https://blog.csdn.net/tz_gx/article/details/20531431

j2ee 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种JavaScript函数changeTdWidth()，用于支持在table中实现td元素的左右移动，特别适合与tableoverflow功能结合使用，兼容大多数浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：table 添加id=“listViewTable”

2：js

function changeTdWidth(){

   var tTD; // 用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题
   var table = document.getElementById("listViewTable");
   for (j = 0; j < table.rows[0].cells.length; j++) {
       table.rows[0].cells[j].onmousedown = function (e) {
           e = e||event;
           // 记录单元格
           tTD = this;
           if (e.clientX+$(document).scrollLeft() > this.offsetWidth+this.offsetLeft - 8) {
               if (this.style.cursor == 'col-resize'){
                   changeTd = true;
               }
               tTD.mouseDown = true;
               tTD.oldX = e.clientX;
               tTD.oldWidth = tTD.offsetWidth;
           }

           // 记录Table宽度
           // table = tTD; while (table.tagName != ‘TABLE’) table = table.parentElement;
           // tTD.tableWidth = table.offsetWidth;
       };
       table.rows[0].cells[j].onmouseup = function () {
           // 结束宽度调整
           if (tTD == undefined) tTD = this;

           tTD.mouseDown = false;
           tTD.style.cursor = 'default';
       };
       table.rows[0].cells[j].onmousemove = function (e) {
           e = e||window.event;
           // 更改鼠标样式
           if (e.clientX+$(document).scrollLeft() > this.offsetWidth+this.offsetLeft - 8){
               this.style.cursor = 'col-resize';
           }
           else{
               this.style.cursor = 'default';
           }

           // 取出暂存的Table Cell
           if (tTD == undefined)
               tTD = this;

           // 调整宽度
           if (tTD.mouseDown != null && tTD.mouseDown == true) {
               if (tTD.oldWidth + (e.clientX - tTD.oldX)>0)
                   tTD.width = tTD.oldWidth + (e.clientX - tTD.oldX);
                   // 调整列宽
               tTD.style.width = tTD.width;
               tTD.style.cursor = 'col-resize';
               // 调整该列中的每个Cell
               table = tTD; while (table.tagName != 'TABLE') table = table.parentElement;
               for (j = 0; j < table.rows.length; j++) {
                   table.rows[j].cells[tTD.cellIndex].width = tTD.width;
               }
               // 调整整个表
               // table.width = tTD.tableWidth + (tTD.offsetWidth – tTD.oldWidth);
               // table.style.width = table.width;
           }
       };
   }
}