周末写了个更改表格行顺序的小功能,直接贴代码

表格部分如下:

<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

<script type="text/javascript">
$(function(){
$('.move_btn').click(function(){
var move_act = $(this).attr('move_act');
$('#test_table tbody tr').removeClass('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>

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

吐槽:喊着加班=狼性的公司都是不适合正常人类生存的公司,把周末加班当成鼓吹的事情&评价员工是否有狼性的标准更是扯淡。

表格行变换顺序功能(jquery)的更多相关文章

  1. jquery更改表格行顺序实例

    使用jquery写的更改表格行顺序的小功能 表格部分: 复制代码代码如下: <table class="table" id="test_table"> ...

  2. jquery完成带复选框的表格行高亮显示

    jquery完成带复选框的表格行高亮显示 通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复选框的,删除时 ...

  3. jQuery实现表格行上移下移和置顶

    jQuery实现表格行上移下移和置顶 我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现 ...

  4. jquery 动态添加表格行

    jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...

  5. jquery完成带单选按钮的表格行高亮显示

    jquery完成带单选按钮的表格行高亮显示 上篇博客写的是复选框的,这次写的是单选框的,有时查询的时候,只能选择一条记录,如果将选中的这条记录的行高亮显示,同时该行的单选按钮也被选中了,这样会提高用户 ...

  6. jQuery实现表格行的动态增加与删除(改进版)

    之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子,有些人评论说"如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故 ...

  7. 通过jQuery实时监听表格行数变化

    [本文出自天外归云的博客园] 使用bootstrap table组件,当使用过滤器的时候,页面的表格行数发生变化,此时需要统计表格行数.想要监听表格变化,如何做呢? 使用场景:有一个表格里放着许多测试 ...

  8. JQuery EasyUI DataGrid根据条件设置表格行样式(背景色)

    1.javascript定义函数返回样式 <script type="text/javascript"> //根据条件设置表格行背景颜色 function setRow ...

  9. jquery 表格行计算

    表格行计算 总金额: function jisuanTrJinE(obj){ var curTab = $(obj).closest("table"); var curTr = $ ...

随机推荐

  1. dublin core实例

    <?xml version="1.0"?> <metadata xmlns="http://example.org/myapp/" xmlns ...

  2. 彻底解决iOS项目中 &quot;_OBJC_CLASS_$_XXXService&quot;, referenced from: 的相似问题

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbmllcGVuZzEwOQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  3. RadHat搭建内网YUM源server

    前言:随着内网linuxserver越来越多,在每台server上安装软件.都要先把安装盘上传上去.在配置本地yum服务,即麻烦又费时.能够在内网的一台linuxserver上安装yum服务,然后其它 ...

  4. editplus如何设置不自动备份

    依次选择:工具,参数设置,文件(默认展开的,要缩回),然后看右边“保存文件时创建备份”,前面的框不要打勾,应用,确定

  5. VC中获取窗体句柄的各种方法

    AfxGetMainWnd AfxGetMainWnd获取自身窗体句柄 HWND hWnd = AfxGetMainWnd()->m_hWnd; GetTopWindow 函数功能:该函数检查与 ...

  6. I18N 国际编码

    <%@ page language="java" import="java.util.*, cn.hncu.domain.*" pageEncoding= ...

  7. 学习tcl的资源

     在这里介绍一些学习tcl的资源,有问题的时候可以尝试从这些资源中获取帮助.       网站:     http://www.tcl.tk 官方站点     http://www.scriptics ...

  8. SQL错误:sql server 目录名无效

    今天遇到一个错误,在网上找了半天,还有人说需要重装sql.我出错误的是网站服务器..重装影响太大了.想找一个比较不影响网站运作的办法.终于也不负我努力(啊喂!其实满百度都是可是你看不懂好吧!)找到了一 ...

  9. string应用

    今天在网上搜了一些资料. C# string类应用 判断是否包含子串 想要判断一个字符串中是否包含某个子串,可以用Contains方法来实现: ? public bool Contains (stri ...

  10. mysql insert语句错误问题解决

    好久没有复习数据库了,竟然忘记了mysql中的关键字(保留字),导致今天一晚上都在查找sql语句错误,特此记录此错误,教训啊. 我在mysql数据库中有一个名为order 的表,啊啊啊啊啊,为啥我给他 ...