jquery实现拖拽table表头改变列宽

本文实例为大家分享了jquery实现拖拽table表头改变列宽的具体代码,供大家参考,具体内容如下

效果:

直接上代码,有注释:

<!DOCTYPE html>
<html>
<head>
    <style>
        table, td, th {
            border: 1px solid #ddd;
            text-align: left;
        }

        table {
            border-collapse: collapse;
            width: 100%;
            table-layout: fixed;
        }

        th, td {
            padding: 5px;
            position: relative;
            user-select: none;
            /*text-overflow: ellipsis;*/
            word-break: break-all;
        }

        .th-sisehandler {
            position: absolute;
            right: -0.5px;
            top: 0;
            z-index: 1;
            width: 5px;
            height: 100%;
            padding-left: 4px;
            cursor: col-resize;
        }

        .th-sisehandler::after {
            content: '';
            display: block;
            width: 10px;
            background-color: #4CAF50; /*演示为了看效果加上的,可以去掉*/
            height: 100%;
        }

        .siselayer {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 9999;
            background-color: #4445a049; /*演示为了看效果加上的,可以去掉*/
            cursor: col-resize;
        }

    </style>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<div style="width: 600px;overflow: auto">
    <table>
        <tr>
            <th width="150">Firstname</th>
            <th width="150">Lastname</th>
            <th width="150">Savings</th>
        </tr>
        <tr>
            <td>Bill</td>
            <td>Gates</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>Steve</td>
            <td>Jobs</td>
            <td>$150</td>
        </tr>
        <tr>
            <td>Elon</td>
            <td>Musk</td>
            <td>$300</td>
        </tr>
        <tr>
            <td>Mark</td>
            <td>Zuckerberg</td>
            <td>$250</td>
        </tr>
    </table>
</div>
<script>

    $("th").mouseover(function (e) {
        if (($(this).find("div").length <= 0)) {
            //1.鼠标移动到表头上时,在th内部添加一个div 元素,用于处理后续拖动事件
            $(this).append("<div class='th-sisehandler'></div>")

            //2.处理上面添加的元素的鼠标按下事件
            $(".th-sisehandler").mousedown(function (evt) {
                //3.在添加的元素上按下时,记录下当前的th表头
                let dragTh = $(this).parent()

                //4.记录按下时的鼠标位置
                let oldClientX = evt.clientX;
                //5.获取当前鼠标按下时的表头的宽度
                let oldWidth = dragTh.width();
                /*6.添加一个全局layer层,用于处理鼠标按下时鼠标移动事件,因为不能在第一步添加的元素上处理鼠标移动事件,添加的元素太小,
                    鼠标容易跑出范围,就捕获不到后续事件
                    所以添加一个全局的遮罩层,捕获鼠标移动事件。
                 */

                let changeSizeLayer = $('<div class="siselayer"></div>');
                $("body").append(changeSizeLayer);

                changeSizeLayer.on('mousemove', function (evt) {
                    //7.处理遮罩层的鼠标移动事件,计算新的表头宽度
                    var newWidth =evt.clientX - oldClientX + oldWidth;
                    //设置新的宽度
                    dragTh.attr('width',Math.max(newWidth,1));

                });

                changeSizeLayer.on('mouseup', function (evt) {
                    //8.鼠标按键复位时,要清楚遮罩层
                    changeSizeLayer.remove();
                    dragTh.find('.th-sisehandler').remove();
                });
            })
        }

        $(this).mouseleave(function () {
            //9.鼠标离开表头时,要移除第一步添加的div
            $(this).find("div").remove()
        })
    })

</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • JQuery表格拖动调整列宽效果(自己动手写的)

    类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整.最近比较空闲,便自己动手尝试实现,在此分享下小小的成果. 首先需要如图所示的鼠标图标文件,在自己的硬盘中搜索*.cur,肯定能找到. 为了能在所有需要该效果的页面使用,并且不需要更改页面任何HTML,我把所有的代码整合在 $(document).ready(function() {}); 中,并写入一个独立的JS文件.

  • jQuery表格列宽可拖拽改变且兼容firfox

    本demo使用jQuery包,实现表格列宽可拖拽功能,并实现页面reset时的重新布局.使用jQuery,方便函数的调用,给要处理的表格添加id 后,直接调用$("#id").movedTh()即可方便实现,修改了firfox的兼容性. 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

  • jQuery实现鼠标可拖动调整表格列宽度

    实现鼠标可拖动调整表格列宽度 如图:  一.引入文件: 复制代码 代码如下: <script src="/js/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="/js/store.js" type="text/javascript"></script> <script src="

  • JQuery拖动表头边框线调整表格列宽效果代码

    类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整.最近比较空闲,便自己动手尝试实现,在此分享下小小的成果. 首先需要如图所示的鼠标图标文件,在自己的硬盘中搜索*.cur,肯定能找到. 为了能在所有需要该效果的页面使用,并且不需要更改页面任何HTML,我把所有的代码整合在 $(document).ready(function() {}); 中,并写入一个独立的JS文件.

  • jquery实现拖拽table表头改变列宽

    本文实例为大家分享了jquery实现拖拽table表头改变列宽的具体代码,供大家参考,具体内容如下 效果: 直接上代码,有注释: <!DOCTYPE html> <html> <head>     <style>         table, td, th {             border: 1px solid #ddd;             text-align: left;         }         table {        

  • jQuery实现拖拽页面元素并将其保存到cookie的方法

    本文实例讲述了jQuery实现拖拽页面元素并将其保存到cookie的方法.分享给大家供大家参考,具体如下: 实现的效果就是页面内的图片可拖拽到任意位置,并将所在位置保存.下次打开页面依然可见.本文是作demo用,实际开发中,位置的数据应保存到数据库中 好了,开始 1.准备工作 a.jquery(1.7.2),ui,cookie插件,json插件.一些图片(本文是5张) 2.页面 上代码 <div class="img_list" id="img_list"&g

  • 基于el-table封装的可拖拽行列、选择列组件的实现

    效果 需要环境 vue elementUI 拖拽插件Sortable.js 需配置属性 示例 <HTable :columns="columns" :data="list" :setColumn="true" tableKey="CategoriesList" style="width: 100%" border > // 这里可以放插槽 <template slot="crea

  • JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    本文实例讲述了JS实现漂亮的窗口拖拽效果.分享给大家供大家参考.具体如下: 这是一款漂亮的JS窗口拖拽效果(改变大小/最小化/最大化/还原/关闭) 特点: ① 窗口可以拖动: ② 窗口可以通过八个方向改变大小: ③ 窗口可以最小化.最大化.还原.关闭: ④ 限制窗口最小宽度/高度. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-win-drug-cha-close-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

  • jquery利用拖拽方式在图片上添加热链接

    本文实例讲述了jquery利用拖拽方式在图片上添加热链接的实现过程,分享给大家供大家参考.具体如下: 运行效果截图如下: 项目的需求,要在一张图片上加不同的链接,比如说,图片是一个套房,里面有沙发,茶几,酒柜,电视柜等,然后在这些物件上加一个超链接,点击后打开相关产品的介绍. 用jquery写了一个在图片添加锚点的功能,实现的原理:一个文本框写入标题,一个文本框写链接,一个添加按钮,一个编辑按钮,当写好内容后点击添中添加,便会在图片的上方出现一个P标签,然后按着鼠标左键拖拽该标签放到相应的地方松

  • jQuery实现拖拽效果插件的方法

    本文实例讲述了jQuery实现拖拽效果插件的方法.分享给大家供大家参考.具体如下: 下面的jQuery插件允许你通过鼠标右键点击拖动overflow的元素,这个插件可以在移动设备上运行 /** * jQuery Drag and Scroll * * Copyright (c) 2012 Ryan Naddy (ryannaddy.com) * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/li

  • jQuery div拖拽用法实例

    本文实例讲述了jQuery div拖拽用法.分享给大家供大家参考,具体如下: 这里需要引用好jquery 和 jqueryui两个包: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta n

  • JS实现拖拽进度条改变元素透明度

    今天要分享的是运用原生JS拖拽进度条改变元素透明度,效果如下: 以下是代码实现,欢迎大家复制粘贴. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS拖拽进度条改变元素透明度</title> <style> #pa

  • jquery实现拖拽添加元素功能

    本文实例为大家分享了jquery实现拖拽添加元素的具体代码,供大家参考,具体内容如下 需求 1.页面上有两个不同的容器,拖拽a容器的元素添加到b容器中: 2.a保持原位不dogn动,b增加新的元素,要实现的效果如下: 3.点击b容器中的元素移除元素 首先准备两个容器 页面效果如下 <div class="bigBox"> <div id="aBox"> <p class="drag" draggable="

  • vue.js Table 组件自定义列宽实现核心方法

    目录 前言 colgroup 和 col 核心实现 一些常量/变量定义 初始化表头列表 initColumns 处理含有固定宽度和最小宽的列 获取各列宽度,并组成一个数组 getWidthList 计算需要自适应的列宽度 getAdaptWidth 监听屏幕变化和属性更新 前言 如果你使用过类似于 ElementUI 的组件库,一定对如下的 API 属性不眼生,例如: <!-- Element UI --> <el-table-column prop="date" l

随机推荐