手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jquery实现更改表格行顺序示例
jquery实现更改表格行顺序示例
摘要:表格部分如下:复制代码代码如下:时间详情操作2014-04-2911:02:24详情2014-04-2810:00:00详情js代码,其中会...

表格部分如下:

复制代码 代码如下:

<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">

<td>

2014-04-29 11:02:24

</td>

<td>

详情

</td>

<td>

<span move_act="up"></span>

<span move_act="down"></span>

</td>

</tr>

<tr cid="7.0.0-2014-04-29_11-02-24_915">

<td>

2014-04-28 10:00:00

</td>

<td>

详情

</td>

<td>

<span move_act="up"></span>

<span 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实现更改表格行顺序示例】相关文章:

jquery实现动态改变div宽度和高度

jQuery实现表格行上移下移和置顶的方法

JavaScript实现自动变换表格边框颜色

js实现鼠标经过表格行变色的方法

js设置document.domain实现跨域的注意点分析

jQuery实现表格行上下移动和置顶效果

jQuery实现html表格动态添加新行的方法

jquery表单对象属性过滤选择器用法

jQuery实现文本展开收缩特效

javascript实现日期按月份加减

精品推荐
分类导航