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