js对表格table行排序

function sortTable(type) {
        // 获取所有行并按第1列进行排序
        var sortedRows = $('#myTbody tr').sort(function (a, b) {

        // 获取需要排序的列的值,可能是数字或者字符,这个根据自己的需要
            var indexa = Number.parseInt($(a).find('td:eq(0)').text());
            var indexb = Number.parseInt($(b).find('td:eq(0)').text());
            if(type == 2){
                return indexb - indexa; // 降序
            }else{
                return indexa - indexb; // 升序
            }
        });

        // 清空原始表格内容
        $('#myTbody').empty();

        // 将排好序的行重新添加到表格中
        $.each(sortedRows, function () {
            $('#myTbody').append($(this));
        });

    }

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现表格的拖拽排序,可以考虑以下步骤: 1. 给每一添加一个可拖拽的属性,例如设置的 draggable 属性为 true。 2. 监听的拖拽事件,当拖拽开始时,记录被拖拽的的位置和数据。 3. 监听拖拽过程事件,计算拖拽与其它的位置关系,根据位置关系决定拖拽的插入位置。 4. 监听拖拽结束事件,根据插入位置将拖拽插入到表格中,并更新表格中其它的位置。 具体实现可以参考以下代码: ```html <table id="sortable-table"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Country</th> </tr> </thead> <tbody> <tr draggable="true"> <td>Alice</td> <td>25</td> <td>USA</td> </tr> <tr draggable="true"> <td>Bob</td> <td>30</td> <td>Canada</td> </tr> <tr draggable="true"> <td>Charlie</td> <td>20</td> <td>UK</td> </tr> </tbody> </table> ``` ```javascript const table = document.getElementById('sortable-table'); let draggedRow = null; table.addEventListener('dragstart', e => { draggedRow = e.target.parentNode; e.dataTransfer.setData('text/html', e.target.innerHTML); }); table.addEventListener('dragover', e => { e.preventDefault(); const targetRow = e.target.parentNode; if (targetRow !== draggedRow) { const rect = targetRow.getBoundingClientRect(); const isAfter = e.clientY > rect.top + rect.height / 2; table.insertBefore(draggedRow, isAfter ? targetRow.nextSibling : targetRow); } }); table.addEventListener('dragend', () => { draggedRow = null; }); ``` 在这个示例代码中,我们给表格中的每一添加了 draggable 属性,并分别监听了 dragstart、dragover 和 dragend 事件,实现表格的拖拽排序

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值