jQuery实现的调整表格行tr上下顺序

2019-11-20 10:49:30

字体：大中小

来源：转载

供稿：网友

表格是大家比较常用的元素，有时候表格中的行需要调整顺序，下面就通过代码实例介绍一下如何利用jquery实现此功能。

代码实例如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>武林网</title><style type="text/css" >table {background:#F90;width:400px;line-height:20px;}td {border-right:1px solid gray;border-bottom:1px solid gray;}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript" > function up(obj) { var objParentTR=$(obj).parent().parent(); var prevTR=objParentTR.prev(); if(prevTR.length>0) { prevTR.insertAfter(objParentTR); } } function down(obj) { var objParentTR=$(obj).parent().parent(); var nextTR=objParentTR.next(); if(nextTR.length>0) { nextTR.insertBefore(objParentTR); } } </script></head><body><table border="0" ><tr><td>武林网一</td><td>武林网一</td><td>武林网一</td><td><a href="#" onclick="up(this)">上移</a> <a href="#" onclick="down(this)">下移</a></td></tr><tr><td>武林网二</td><td>武林网二</td><td>武林网二</td><td><a href="#" onclick="up(this)">上移</a> <a href="#" onclick="down(this)">下移</a></td></tr><tr><td>武林网三</td><td>武林网三</td><td>武林网三</td><td><a href="#" onclick="up(this)">上移</a> <a href="#" onclick="down(this)">下移</a></td></tr><tr><td>武林网四</td><td>武林网四</td><td>武林网四</td><td><a href="#" onclick="up(this)">上移</a> <a href="#" onclick="down(this)">下移</a></td></tr><tr><td>武林网五</td><td>武林网五</td><td>武林网五</td><td><a href="#" onclick="up(this)">上移</a> <a href="#" onclick="down(this)">下移</a></td></tr></table></body></html>

通过以上代码简单实现了jQuery实现的调整表格行tr上下顺序，希望本段代码可以帮助到大家。

上一篇：JavaScript基础知识及常用方法总结

下一篇：javascript实现checkbox复选框实例代码