jquery-resizable可调整大小的table

当前位置：电视猫 > JavaScript>

电视猫时间： 2024-08-31 16:37:01

使用jQuery-resizable创建可调整大小的表格

理解jQuery-resizable

jQuery-resizable 是 jQuery UI 中的一个插件，它可以使 DOM 元素（包括表格）具有可调整大小的功能。通过拖动元素的边框，用户可以动态地调整元素的大小。

实现步骤

引入必要的库： 确保你已经引入了 jQuery 和 jQuery UI 库。 HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

2. 创建HTML表格：

HTML

<table id="myTable">
    <thead>
        <tr>
            <th>列1</th>
            <th>列2</th>
            <th>列3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
    </tbody>
</table>

应用jQuery-resizable： JavaScript

$(document).ready(function() {
    $("#myTable th").resizable({
        handles: 'e', // 仅允许从右侧调整大小
        resize: function(event, ui) {
            // 在调整大小过程中执行的操作，例如调整列宽
            $(this).nextAll().css('left', ui.position.left + ui.size.width);
        }
    });
});

代码解释

$("#myTable th").resizable()：将 myTable 表格的所有 <th> 元素设置为可调整大小。
handles: 'e'：指定只允许从右侧拖动来调整大小。
resize：在调整大小的过程中触发，可以在这里执行自定义操作，例如调整其他列的宽度。

完整示例

HTML

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Resizable Table</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
</   head>
<body>
    <table id="myTable">
        </table>
    <script>
        $(document).ready(function() {
            $("#myTable th").resizable({
                handles: 'e',
                resize: function(event, ui) {
                    $(this).nextAll().css('left', ui.position.left + ui.size.width);
                }
            });
        });
    </script>
</body>
</html>