移动表格行 解决低版本IE fadeIn fadeOut 失效问题
2016-11-10 10:48
323 查看
在维护一个内部使用的web工具的时候,需要在表格里配置参数,并且支持参数列的上下移动,有jQuery-UI工具支持对表格列的拖动,但是此处不追求效果,而且旧系统页面兼容性很差,无奈只能做上下移动的按钮。
在表格每行的最后一列增加一个操作按钮。
<tr style='filter:inherit'><td style='filter:inherit'></td>
<td style='filter:inherit'><a onclick='moveup(this)' href='#' class='up' > 上移</a></td>
<td style='filter:inherit'><a onclick='movedown(this)' href='#' class='down' > 下移</a></td>
以上代码可以解决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/
在表格每行的最后一列增加一个操作按钮。
<tr style='filter:inherit'><td style='filter:inherit'></td>
<td style='filter:inherit'><a onclick='moveup(this)' href='#' class='up' > 上移</a></td>
<td style='filter:inherit'><a onclick='movedown(this)' href='#' class='down' > 下移</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/
相关文章推荐
- IE9无法输入文字、鼠标滚轮失效等问题之解决办法
- jQuery validation 1.8 with jQuery 1.6 in IE 6,7,8,9 问题解决
- 完美解决IE低版本不支持call与apply的问题
- css样式解决不同IE版本之间的兼容问题
- 如何解决IE版本兼容问题
- 在Share Point 2010中,如何使用 in 语句?并且解决Boolean Contains[Int32](System.Collections.Generic.IEnumerable`1[System.Int32], Int32)的问题。
- ie,360下锚点失效问题解决
- 完美解决IE低版本不支持call与apply的问题
- 解决WebForm项目在高版本IE下控件显示异常的问题
- IE下IFrame引用跨域站点页面时,Session失效问题解决
- 解决低版本ie下li:hover不支持的问题
- 解决低版本IE与Mazilla不能发表文章的问题
- 解决IE低版本不支持call和apply问题
- 关于EXTJS 2.2.1版本在IE环境下Grid组件表头下拉菜单图标错位问题的解决
- IE的relative失效的问题解决办法
- 不同版本的IE无法安装于同一台机器的问题的解决
- 由于IE版本问题导致SAP的F1帮助文档显示不出来的解决办法
- 如何解决IE版本兼容问题
- ie重定向时,session失效问题解决办法