jquery实现更改表格行顺序示例

更新时间：2014年04月30日 10:34:55 作者：

本文主要介绍了jquery实现更改表格行顺序示例,大家参考使用吧

表格部分如下：

<table class="table" id="test_table">
    <thead>
        <tr>
               <th>时间</th>
            <th>详情</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr cid="7.0.0-2014-04-29_11-02-24_123" class="list_line">
            <td>
                2014-04-29 11:02:24
            </td>
            <td>
                详情
            </td>
            <td>
                <span class="move_btn glyphicon glyphicon-arrow-up" move_act="up"></span>
                <span class="move_btn glyphicon glyphicon-arrow-down" move_act="down"></span>
            </td>
        </tr>
        <tr cid="7.0.0-2014-04-29_11-02-24_915" class="list_line">
            <td>
                2014-04-28 10:00:00
            </td>
            <td>
                详情
            </td>
            <td>
                <span class="move_btn glyphicon glyphicon-arrow-up" move_act="up"></span>
                <span class="move_btn glyphicon glyphicon-arrow-down" move_act="down"></span>
            </td>
        </tr>
    </tbody>
</table>

js代码，其中会为要变更的行在变更顺序后加上class=danger

复制代码代码如下:

    if(move_act == 'up'){
      $(this).parent().parent('tr').addClass('danger')
             .prev().before($(this).parent().parent('tr'));
    }
    else if(move_act == 'down'){
      $(this).parent().parent('tr').addClass('danger')
             .next().after($(this).parent().parent('tr'));
    }
    setTimeout("$('#test_table tbody tr').removeClass('danger');", 2000);
});
});
</script>

更改后可以按照每行的唯一标记提交新的顺序

您可能感兴趣的文章:

sdfssdf

jquery focus(fn),blur(fn)方法实例代码
jquery focus(fn),blur(fn)方法实例代码，需要的朋友可以参考下。
2011-12-12
利用jQuery来动态为属性添加或者删除属性的简单方法
下面小编就为大家带来一篇利用jQuery来动态为属性添加或者删除属性的简单方法。小编觉的挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-12-12
jQuery可见性过滤选择器用法示例
这篇文章主要介绍了jQuery可见性过滤选择器用法,结合实例形式分析了jQuery针对元素hidden属性的过滤操作相关技巧,需要的朋友可以参考下
2016-09-09
jQuery滚动加载图片实现原理
这篇文章主要介绍了jQuery滚动加载图片实现原理，通过四个方面来说明懒加载技术的原理，感兴趣的小伙伴们可以参考一下
2015-12-12
Jquery中map函数的用法
这篇文章主要介绍了Jquery中map函数的用法的相关资料，map()这个函数可以用在不同的地方，非常实用，感兴趣的朋友参考下吧
2016-06-06
jQuery function的正确书写方法
jQuery function想必大家都不会陌生，web前端开发人员经常会接触到，下面为大家介绍下它的正确书写方法，感兴趣的朋友可以参考下
2013-08-08
jquery解析JSON数据示例代码
作为jquery异步请求的传输对象，jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式
2014-03-03
JQuery绑定事件四种实现方法解析
这篇文章主要介绍了JQuery绑定事件四种实现方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-12-12
基于jquery实现的鼠标悬停提示案例
本文主要介绍了基于jquery实现的鼠标悬停提示的详细案例。代码全面，功能实用，需要的朋友可以参考借鉴
2016-12-12
jQuery的bind()方法使用详解
bind()定义和用法：bind() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。
2015-07-07