移动表格行 解决低版本IE fadeIn fadeOut 失效问题

时间：2021-06-05 22:49:35

在维护一个内部使用的web工具的时候，需要在表格里配置参数，并且支持参数列的上下移动，有jQuery-UI工具支持对表格列的拖动，但是此处不追求效果，而且旧系统页面兼容性很差，无奈只能做上下移动的按钮。

在表格每行的最后一列增加一个操作按钮。

<tr  style='filter:inherit'><td  style='filter:inherit'></td>

<td  style='filter:inherit'><a onclick='moveup(this)' href='#' class='up' >&nbsp;上移</a></td>

<td  style='filter:inherit'><a onclick='movedown(this)' href='#'  class='down' >&nbsp;下移</a></td>

function moveup(thistr) {

    //var $up = $(".up");
    //获取按钮所在的行，以下两种写法都是可行的。

    // var $tr = $(this).parents("tr");

    var $tr = $(thistr).parent().parent();

    if ($tr.index() != 0) {//是否为第一行，不过这里不判断第一行也不会有上移效果

        $tr.animate({opacity: "0"}).animate({opacity: "1"});
        //以下两种方式都可以将此行插入到前一行的前面，也就是实现两行的互换。

        // $tr.prev().before($tr);

        $tr.insertBefore($tr.prev());

        resetTablistRowNumber($('#listTabReq'));//重设列的序号

        resetTablistRowNumber($('#listTabResp'));

    }

　　

function movedown(thistr) {

    //var $tr = $(thistr).parent().parent();

    var $tr = $(thistr).parents("tr");

    $tr.animate({opacity:"0"});

    $tr.next().after($tr);

    $tr.animate({opacity: "1"});

    resetTablistRowNumber($('#listTabReq'));

    resetTablistRowNumber($('#listTabResp'));

}

以上代码可以解决ie8下jQuery的fadeIn fadeOut 失效的问题，实测动画没有问题，而且也不会出现任何偏移。

说明：

1.fadeIn fadeOut 问题主要是在ie8环境下，动画失效，我还遇到更奇葩的问题，就是 fadeIn 之后 无法fadeOut出来，查了资料说是在动画元素的子元素加上 style='filter:inherit' 属性，可以实现动画。此处我没有设置display属性。

2.可以实现淡入淡出之后，发现每一次操作之后，结果页面都自动向下拖了一行，在另外一个例子里是右偏了一点，这点可通过animate设置动画，这时便不会有页面的奇葩偏移了。

参考资料：

http://www.simonbattersby.com/blog/2010/10/jquery-fadein-and-fadeout-problems-with-ie8/

相关文章