table列宽拖拽

最新推荐文章于 2023-02-15 12:37:21 发布
最新推荐文章于 2023-02-15 12:37:21 发布
阅读量1.9k 收藏 2
点赞数
分类专栏： Html

1. 使用第三方组件colResizable-1.6.min.js （官网：http://www.bacubacu.com/colresizable/）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.14.2/extensions/resizable/bootstrap-table-resizable.min.js"></script>
    <script src="../../static/js/plugins/colResizable-1.6.min.js"></script>
</head>
<body>
<table id="tb_3" cellspacing="0" cellpadding="2" width="100%" border="1">
    <tbody>
    <tr align="center" bgcolor="#dcdcdc">
        <td style="width:100px;">用户编号</td>
        <td>试用时间</td>
        <td>转正时间</td>
        <td>性别</td>
        <td>姓名拼音</td>
        <td>生日时间</td>
        <td>民族</td>
        <td>身高</td>
    </tr>
    <tr>
        <td>2000001</td>
        <td>1997-3-13</td>
        <td>1997-3-13</td>
        <td>1</td>
        <td>WZJ</td>
        <td>1965-3-13</td>
        <td>汉</td>
        <td>171</td>
    </tr>
    <tr>
        <td>2000045</td>
        <td>2001-2-15</td>
        <td>2001-3-15</td>
        <td>0</td>
        <td>WY</td>
        <td>1978-8-5</td>
        <td>汉</td>
        <td>162</td>
    </tr>
    <tr>
        <td>2000046</td>
        <td>2001-2-23</td>
        <td>2001-3-23</td>
        <td>0</td>
        <td>LQ</td>
        <td>2001-2-23</td>
        <td>汉</td>
        <td>171</td>
    </tr>
    </tbody>
</table>
<script type="text/javascript">
    $(function () {
        $("#tb_3").colResizable({
            liveDrag: true,
            gripInnerHtml: "<div class='grip'></div>",
            draggingClass: "dragging",
            resizeMode: 'fit'
        });
    });
</script>
</body>
</html>

 

2. 原生js （参考：https://blog.csdn.net/liangxw1/article/details/78144347）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table id="tb_3" cellspacing="0" cellpadding="2" width="100%" border="1">
    <tbody>
    <tr align="center" bgcolor="#dcdcdc">
        <td style="width:100px;">用户编号</td>
        <td>试用时间</td>
        <td>转正时间</td>
        <td>性别</td>
        <td>姓名拼音</td>
        <td>生日时间</td>
        <td>民族</td>
        <td>身高</td>
    </tr>
    <tr>
        <td>2000001</td>
        <td>1997-3-13</td>
        <td>1997-3-13</td>
        <td>1</td>
        <td>WZJ</td>
        <td>1965-3-13</td>
        <td>汉</td>
        <td>171</td>
    </tr>
    <tr>
        <td>2000045</td>
        <td>2001-2-15</td>
        <td>2001-3-15</td>
        <td>0</td>
        <td>WY</td>
        <td>1978-8-5</td>
        <td>汉</td>
        <td>162</td>
    </tr>
    <tr>
        <td>2000046</td>
        <td>2001-2-23</td>
        <td>2001-3-23</td>
        <td>0</td>
        <td>LQ</td>
        <td>2001-2-23</td>
        <td>汉</td>
        <td>171</td>
    </tr>
    </tbody>
</table>
<script type="text/javascript">
    var tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题
    var table = document.getElementById("tb_3");
    for (j = 0; j < table.rows[0].cells.length; j++) {
        table.rows[0].cells[j].onmousedown = function () {
            //记录单元格
            tTD = this;
            if (event.offsetX > tTD.offsetWidth - 10) {
                tTD.mouseDown = true;
                tTD.oldX = event.x;
                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 () {
            //更改鼠标样式
            if (event.offsetX > this.offsetWidth - 10)
                this.style.cursor = 'col-resize';
            else
                this.style.cursor = 'default';
            //取出暂存的Table Cell
            if (tTD === undefined) tTD = this;
            //调整宽度
            if (tTD.mouseDown != null && tTD.mouseDown === true) {
                tTD.style.cursor = 'default';
                if (tTD.oldWidth + (event.x - tTD.oldX) > 0)
                    tTD.width = tTD.oldWidth + (event.x - 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;
            }
        };
    }
</script>
</body>
</html>

 

Jalen备忘录
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
table表格拖动改变td宽度
11-08
本程序主要是用table表格拖动改变td宽度。
案例 | iview中Table：拖拽适配列、自定义固定列、合并行
aningde的博客
04-07 2477
文 / 景朝霞 来源公号 / 朝霞的光影笔记 ID / zhaoxiajingjing 0 / 更新Table "iview": "2.13.0",对比最新版本的iview:4.1.3中的Table功能，获取最新功能：拖拽、合并行等。 【PS：由于一些原因不能统一升级整个iview，我动了源码这很不好，望大佬们不吝赐教更好的方案~】 1 / Table的拖拽适配列 在table.vue文件中h...
antd实现Table拖拽调整列宽
weixin_46600931的博客
01-30 4555
table表单列宽拖拽在最新的antd 版本中已经没有demo了，需要去过完版本去找3.26.19。注意：在实现拖曳功能的前提是。
实现bootstrap table可设置列宽和可拖动列宽
u011853017的博客
02-15 5329
BootStrap-Table 固定头+可调节列宽
table组件—可伸缩列
雷雨天的雷胖子
12-09 1354
目录 一、概述 二、详解 三、拓展 一、概述 ant design vue框架中，table组件本身不具备列拖拽功能，若想实现列拖动调整列宽的功能，需要引用vue-draggable-resizable插件。 二、详解 第一步：安装vue-draggable-resizable插件 vue-draggable-resizable插件推荐安装2.1.0版本，最新的2.2.0版本存在问题。 > npm install [email protected]
React(hook)基于antd Table实现可拖拽调整列宽的表格
weixin_38884718的博客
03-29 6059
React基于antd Table实现可拖拽调整列宽的表格 前言        在日常的工作开发中，会经常的用到表格，进行数据展示，但是数据的长度不一，初始设置的表格列宽不一定符合数据的展示要求，故有时需要手动的进行表格列宽的调整。        用过antd的童鞋，都知道antd的表格并不支持列拖拽功能；那么在react+antd的项目中如何实现可拖动表格呢？ 实现功能 1：表格列宽初始自动分配、列宽总和不能超过容器宽度（无
table拖动表格列宽度
JarryLiu 的专栏
04-08 1021
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> .resizeDivClass { position:relative; background-color:#FFFCCC; width:2; z-index:1; left:expression_r(this.parentElement.offsetWidt
Bootstrap Table列宽拖动的方法
10-18
Bootstrap Table可拖动，需要用到它的Resizable扩展插件，下面脚本之家小编给大家带来了Bootstrap Table列宽拖动的方法，感兴趣的朋友一起看看吧
Table 列宽拖动
04-27
当鼠标在table两列头之间时，鼠标变成双箭头，拖动鼠标可以调节table列的宽度。
colResizable表格列宽支持拖动效果
02-25
该js插件可以拖动表格td单元格列宽。asp.net里面gridwiew也可以用
基于colResizable-1.6实现一个表头固定、列宽可调的table.zip
10-11
不要浪费积分下载，请参考博客：https://blog.csdn.net/fukaiit/article/details/102492232
colResizable改变表格列宽
10-10
colResizable是拖动表格线条改变列宽的工具，非常好用
colResizable-1.6
09-08
支持table列大小拖动调整大小，非常好用。有详细的帮助和样例。大家只需要引入colResizable.min.js，参看样例即可使用。。
bootstrapTable实现列宽可拖动
07-06
实现了bootstrapTable 的列宽可鼠标拖动，方便查看列宽显示不完全的内容，前台js
基于colResizable-1.6实现一个表头固定、列宽可调的table
WWF_HelloWorld
10-11 2220
colResizable官网：http://www.bacubacu.com/colresizable/ 能够实现各列完全对齐 能够兼容有无滚动条两种情况 只能在表头部分拖动改变列宽（不能在表体列边框上拖动，我完全可以接受） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-...
bootstrap 可以拖动 表格宽度_table表格列宽可拖动
weixin_39875028的博客
02-15 746
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...
实现dataTables列宽拖动
hsany330的专栏
06-22 1347
jquery的dataTables不能实现列宽拖动，可以引入colResizable-1.6.min.js实现列宽拖动。百度云地址：https://pan.baidu.com/s/1i2fknF1TcHaUEPFDEO017Q。 提取码：z10d。 将colResizable-1.6.min.js文件放进项目 然后需要将dataTables的自适应宽度和X、Y滚动轴需要关闭，否则可能会导致表头拖动列宽但是数据列的列宽不会发生改变。 将$(‘table’).colResizable();设置在
2019-09-04 colResizable 插件的使用
XU1157896096的博客
09-04 934
1 colResizable 的简单介绍 colResizable是一个免费的jQuery插件，旨在通过手动拖动列锚点来增强任何类型的HTML表对象，从而增加列重新调整大小的功能。它兼容鼠标和触摸设备，并具有一些不错的功能，如页面刷新或回发后的布局持续性以及与百分比和基于像素的表格布局的兼容性。它的体积很小（colResizable 1.0只有2kb），它与所有主流浏览器（IE7...
bootstraptable列宽左右拖动
最新发布
11-18
以下是使用Bootstrap Table Resizable插件实现列宽左右拖动的方法： 1.首先，在HTML文件中引入Bootstrap Table和Bootstrap Table Resizable插件的CSS和JS文件。 ```html ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值