jquery調(diào)整表格行tr上下順序?qū)嵗v解
表格是大家比較常用的元素,有時(shí)候表格中的行需要調(diào)整順序,下面就通過(guò)代碼實(shí)例介紹一下如何利用jquery實(shí)現(xiàn)此功能,分享給大家供大家參考,具體內(nèi)容如下
代碼實(shí)例如下:
<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>
以上代碼實(shí)現(xiàn)了我們的要求,代碼比較簡(jiǎn)單,這里就不多介紹了。
希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
jQuery使用CSS()方法給指定元素同時(shí)設(shè)置多個(gè)樣式
這篇文章主要介紹了jQuery使用CSS()方法給指定元素同時(shí)設(shè)置多個(gè)樣式的方法,實(shí)例分析了jQuery中css方法的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03jQuery第一次運(yùn)行頁(yè)面默認(rèn)觸發(fā)點(diǎn)擊事件的實(shí)例
下面小編就為大家分享一篇jQuery第一次運(yùn)行頁(yè)面默認(rèn)觸發(fā)點(diǎn)擊事件的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01解決jQuery ajax動(dòng)態(tài)新增節(jié)點(diǎn)無(wú)法觸發(fā)點(diǎn)擊事件的問(wèn)題
在寫(xiě)ajax加載數(shù)據(jù)的時(shí)候發(fā)現(xiàn),后面添加進(jìn)來(lái)的demo節(jié)點(diǎn)元素,失去了之前的點(diǎn)擊事件,如何解決此問(wèn)題呢?下面小編給大家?guī)?lái)了jQuery ajax動(dòng)態(tài)新增節(jié)點(diǎn)無(wú)法觸發(fā)點(diǎn)擊事件的解決方法,一起看看吧2017-05-05Jquery 數(shù)組操作大全個(gè)人總結(jié)
jQuery的數(shù)組處理,便捷,功能齊全. 最近的項(xiàng)目中用到的比較多,最近時(shí)間緊迫,今天抽了些時(shí)間回過(guò)頭來(lái)看 jQuery中文文檔順便對(duì)jQuery數(shù)組做個(gè)總結(jié)2013-11-11jQuery調(diào)用AJAX時(shí)Get和post公用的亂碼解決方法實(shí)例說(shuō)明
js調(diào)用AJAX時(shí)Get和post的亂碼解決辦法以前有寫(xiě)過(guò)的但是使用js代碼比較繁瑣,下面與大家分享下使用jQuery該怎么解決,遇到類(lèi)似情況的朋友可以參考下哈2013-06-06