表格是大家比較常用的元素,有時候表格中的行需要調整順序,下面就通過代碼實例介紹一下如何利用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上下順序,希望本段代碼可以幫助到大家。
新聞熱點
疑難解答