正文

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

IP云
IP云V管理员/8 阅读
08/29
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

在维护一个内部使用的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/