上移、下移、置顶、置底以及删除表格中某列数据

最新推荐文章于 2024-07-27 03:56:28 发布

smilejuan

最新推荐文章于 2024-07-27 03:56:28 发布

阅读量1k

点赞数 1

分类专栏： Java javaweb开发文章标签：数据移动

本文链接：https://blog.csdn.net/smilejuan/article/details/99459012

版权

在网页开发中，常常需要实现数据排序功能，尤其是对表格中某一列的操作。本文介绍如何实现列的上移、下移、置顶、置底以及删除功能，不同于常见的整行移动，专注于列级别的操作。

摘要由CSDN通过智能技术生成

在开发项目经常存在在页面排序，经常需要上移、下移、置顶、置底和删除功能，网上大多都是整行的移动，以下是针对某列进行移动的

//上移
function upList(index){
    var $tr = $(index).parents("tr");
    if ($tr.index() != 0) {
        //效果  fadeOut() 方法使用淡出效果来隐藏被选元素。 fadeIn() 方法使用淡入效果来显示被选元素。
        $tr.children('td').eq(1).fadeOut().fadeIn();
        var nowTdId=$tr.children('td').eq(1).attr("id");
        var nowTd=$tr.children('td').eq(1).html();
        var prevTdId=$tr.prev().children('td').eq(1).attr("id");
        var prevTd=$tr.prev().children('td').eq(1).html();
        //赋值
        $tr.children('td').eq(1).html(prevTd);
        $tr.prev().children('td').eq(1).html(nowTd);
        //更换id
        $tr.children('td').eq(1).attr("id",prevTdId);
        $tr.prev().children('td').eq(1).attr("id",nowTdId);
        //更换数组中的值
        var line=$tr.index();
        fileList[line-1].id=nowTdId;
        fileList[line-1].name=nowTd;

        fileList[line].id=prevTdId;
        fileList[line].name=prevTd;
    }
}

//下移
function downList(index){
    var $down = $(".down");
    var len = $down.length;
    var $tr = $(index).parents("tr");
    if ($tr.index() != len - 1) {
        $tr.children('td').eq(1).fadeOut().fadeIn();
        var nowTdId=$tr.children('td').eq(1).attr("id");
        var nowTd=$tr.children('td').eq(1).html();
        var nextTdId=$tr.next().children('td').eq(1).attr("id");
        var nextTd=$tr.next().children('td').eq(1).html();
        //赋值
        $tr