JQ实现Table的tr上移下移功能

今日份需求:实现表格行的上移下移,并更新排序值,效果如下:

话不多说直接上代码,JQ实现挺简单的

HTML代码

       <div>
           <span>
               <button class="layui-btn" id="doUp">上移</button><button class="layui-btn" id="doDown">下移</button>
            </span>
        </div>
        <table class="layui-table" style="width: 800px; margin-top: 3px;">
            <thead>
                <tr>
                    <th style="width: 100px; padding: 0px 0px; height: 32px;">姓名</th>
                    <th style="width: 100px; padding: 0px 0px; height: 32px;">联系电话</th>
                    <th style="width: 20px; padding: 0px 0px; height: 32px;">排序值</th>
                </tr>
            </thead>
            <tbody id="demo">
                <tr>
                    <td>张三</td>
                    <td>139000000</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>137000000</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>王五</td>
                    <td>139000000</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>赵六</td>
                    <td>139000000</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>孙七</td>
                    <td>139000000</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>周八</td>
                    <td>139000000</td>
                    <td>6</td>
                </tr>
            </tbody>
        </table>

JQ代码

<script>
    $(function () {
        //添加点选中行样式方便查看效果
        $("#demo tr").click(function () {
            if (!$(this).hasClass("selected")) {
                $("#demo tr.selected").removeClass("selected");
                $(this).addClass("selected");
            }
        });
        //上移
        $("#doUp").click(function () {
            Up();
        });
        //下移
        $("#doDown").click(function () {
            Down();
        });
    });
    //上移
    function Up() {
        var currentOrderno;//当前排序值
        var tempOrderno;//临时值
        var current = $("#demo tr.selected");//获取当前行
        currentOrderno = current.find('td:eq(2)').text();
        var prev = current.prev();//当前tr的前一个元素
        if (current.index() > 0) {//大于0表示签名还有行,没有到顶
            //下面调换两行的排序值,类似冒泡排序
            tempOrderno = prev.find('td:eq(2)').text();
            prev.find('td:eq(2)').text(currentOrderno);
            current.find('td:eq(2)').text(tempOrderno);
            //把选中行插入到上一行的前面
            current.insertBefore(prev);
        }
    }
    //下移
    function Down() {
        var currentOrderno;
        var tempOrderno;
        var current = $("#demo tr.selected");
        currentOrderno = current.find('td:eq(2)').text();
        var next = current.next();//当前tr的下一个元素
        if (next.length > 0) {//大于0表示后面还有行,没有到底
            tempOrderno = next.find('td:eq(2)').text();
            next.find('td:eq(2)').text(currentOrderno);
            current.find('td:eq(2)').text(tempOrderno);
            //把选中行插入到下一行的后面
            current.insertAfter(next);
        }
    }
</script>

 

### 池化技术与虚拟化技术的核心差异 池化技术虚拟化技术虽然都旨在提升资源利用率灵活性,但在实现方式、目标以及适用场景上存在显著区别。 #### 1. **定义与核心概念** - 虚拟化技术是指通过软件模拟硬件环境,在单一物理设备上创建多个独立的逻辑实例。这种技术可以应用于计算、存储网络等多个领域[^3]。例如,服务器虚拟化允许在同一台物理机上运行多个虚拟机(VM),每个虚拟机拥有自己的操作系统应用程序。 - 池化技术则是指将多个物理资源抽象成一个统一的资源池,以便动态分配给不同的用户或任务。其主要目的是最大化资源共享效率,减少闲置资源浪费。例如,GPU算力池化技术可以通过云原生手段优化GPU资源调度,满足多样化的高性能计算需求[^4]。 --- #### 2. **核心技术机制** - **虚拟化**依赖于 hypervisor 或容器引擎等工具来隔离各个虚拟单元,并提供完整的执行环境。对于传统虚拟机而言,hypervisor 是关键组件,负责管理协调底层硬件资源[^1]。而对于容器化,则采用操作系统的命名空间控制组功能实现进程级别的隔离。 - **池化**更注重资源整合而非隔离。它通过对异构资源进行标准化描述,构建统一接口供上层调用者访问。比如在存储虚拟化中,不同类型的磁盘阵列会被封装成逻辑卷呈现给最终使用者;而在 GPU 设备虚拟化过程中,多张显卡可能被组合起来形成一个大型计算集群。 --- #### 3. **性能表现对比** - 尽管全面虚拟化提供了高度的安全性兼容性保障,但由于额外引入了一层中间件,不可避免地带来一定开销。相比之下,基于共享 OS 内核设计的容器解决方案则显得更为轻便快捷,尤其适用于短生命周期的工作负载处理。 - 反观池化方案,由于无需复制整个 guest OS 实例即可完成任务迁移或者扩展容量配置等工作,因此往往具备更低延迟特性。特别是在面对大规模并发请求时,这类架构展现出无可比拟的优势。 --- #### 4. **典型应用场景分析** | 技术类别 | 主要特点 | 常见用途 | |----------|----------------------------------------------------------------------------------------------|------------------------------------------------------------------| | 虚拟化 | 提供完全独立的操作系统环境,支持跨平台移植 | 数据中心基础设施建设、桌面即服务 (DaaS) | | 容器化 | 共享宿主机内核,启动迅速,占用较少内存 | 微服务框架搭建、持续集成/交付流水线 | | 存储池化 | 统一管理分布式文件系统中的可用块设备 | 大数据分析项目、备份恢复计划 | | 网络池化 | 创建虚拟局域网(VLAN),简化流量路由规则 | 私有云计算环境下的租户间通信 | | GPU池化 | 集中式调配图形处理器能力 | AI训练作业调度、科学仿真实验 | 上述表格总结了几种主流形式及其各自擅长解决的实际问题类型。 --- ```python # 示例代码展示两种技术的不同之处 import virtualbox as vb from docker import DockerClient def create_vm(): """ 使用 VirtualBox API 创建一个新的虚拟机 """ vbox = vb.VirtualBox() new_machine = vbox.create_machine("Test VM", ["--ostype", "Linux"]) return new_machine.id def run_container(): """ 启动一个简单的 Nginx Web Server 容器实例 """ client = DockerClient(base_url='unix://var/run/docker.sock') container = client.containers.run('nginx', detach=True, ports={'80/tcp': 80}) return container.short_id ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值