jQuery实现的调整表格行tr上下顺序
表格是大家比较常用的元素,有时候表格中的行需要调整顺序,下面就通过代码实例介绍一下如何利用jquery实现此功能。
代码实例如下:
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <metaname="author"content="http://www.softwhy.com/"/> <title>毛票票</title> <styletype="text/css"> table { background:#F90; width:400px; line-height:20px; } td { border-right:1pxsolidgray; border-bottom:1pxsolidgray; } </style> <scripttype="text/javascript"src="mytest/jQuery/jquery-1.8.3.js"></script> <scripttype="text/javascript"> functionup(obj) { varobjParentTR=$(obj).parent().parent(); varprevTR=objParentTR.prev(); if(prevTR.length>0) { prevTR.insertAfter(objParentTR); } } functiondown(obj) { varobjParentTR=$(obj).parent().parent(); varnextTR=objParentTR.next(); if(nextTR.length>0) { nextTR.insertBefore(objParentTR); } } </script> </head> <body> <tableborder="0"> <tr> <td>毛票票一</td> <td>毛票票一</td> <td>毛票票一</td> <td><ahref="#"onclick="up(this)">上移</a><ahref="#"onclick="down(this)">下移</a></td> </tr> <tr> <td>毛票票二</td> <td>毛票票二</td> <td>毛票票二</td> <td><ahref="#"onclick="up(this)">上移</a><ahref="#"onclick="down(this)">下移</a></td> </tr> <tr> <td>毛票票三</td> <td>毛票票三</td> <td>毛票票三</td> <td><ahref="#"onclick="up(this)">上移</a><ahref="#"onclick="down(this)">下移</a></td> </tr> <tr> <td>毛票票四</td> <td>毛票票四</td> <td>毛票票四</td> <td><ahref="#"onclick="up(this)">上移</a><ahref="#"onclick="down(this)">下移</a></td> </tr> <tr> <td>毛票票五</td> <td>毛票票五</td> <td>毛票票五</td> <td><ahref="#"onclick="up(this)">上移</a><ahref="#"onclick="down(this)">下移</a></td> </tr> </table> </body> </html>
通过以上代码简单实现了jQuery实现的调整表格行tr上下顺序,希望本段代码可以帮助到大家。