JQuery實現table中tr上移下移的示例(超簡單)
更新時間：2018年01月08日 14:44:06 作者：一包大豫竹
下面小編就為大家分享一篇JQuery實現table中tr上移下移的示例(超簡單)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
表格樣式
<table>
<tr>
<td><input type="button" value="上移" onclick="moveUp(this)"/></td>
<td><input type="button" value="下移" onclick="moveDown(this)"/></td>
</tr>
<tr>
<td><input type="button" value="上移" onclick="moveUp(this)"/></td>
<td><input type="button" value="下移" onclick="moveDown(this)"/></td>
</tr>
<tr>
<td><input type="button" value="上移" onclick="moveUp(this)"/></td>
<td><input type="button" value="下移" onclick="moveDown(this)"/></td>
</tr>
</table>
js代碼
// 上移
function moveUp(obj) {
var current = $(obj).parent().parent(); //獲取當前<tr>
var prev = current.prev(); //獲取當前<tr>前一個元素
if (current.index() > 0) {
current.insertBefore(prev); //插入到當前<tr>前一個元素前
}
}
// 下移
function moveDown(obj) {
var current = $(obj).parent().parent(); //獲取當前<tr>
var next = current.next(); //獲取當前<tr>后面一個元素
if (next) {
current.insertAfter(next); //插入到當前<tr>后面一個元素后面
}
}
以上這篇JQuery實現table中tr上移下移的示例(超簡單)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了使用jquery.upload.js實現異步上傳的示例代碼,需要的朋友可以參考下2014-07-07
這篇文章主要介紹了Jquery zTree 樹控件異步加載操作，學習Jquery zTree異步加載，zTree實現一套能完成大部分常用功能的 Tree插件，感興趣的小伙伴們可以參考一下2016-02-02
JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允許請求當前源（域名、協(xié)議、端口）的資源。2011-06-06
這篇文章主要介紹了jQuery自定義導入組件的相關資料,包括組件js，組件css及組件引用的內容，非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-11-11
這篇文章主要介紹了jQuery中extend函數詳解,十分詳細，需要的朋友可以參考下2015-02-02
這篇文章主要介紹了jquery動態(tài)切換背景圖片的簡單實現方法,涉及jQuery自定義函數結合時間函數動態(tài)變換背景圖片的相關技巧,需要的朋友可以參考下2016-05-05
jquery checkbox全選反選效果代碼,需要的朋友可以參考下。2009-11-11
本文給大家分享的是一段jQuery實現炫酷的鼠標軌跡的特效代碼，希望小伙伴們能夠喜歡。2015-02-02
改寫《鋒利的jQuery》第三章章節(jié)總結的例子2010-03-03
這篇文章主要介紹了jquery使用echarts實現有向圖可視化功能,結合完整實例形式分析了jquery的echarts.js插件實現有向圖可視化相關實現技巧與操作注意事項,需要的朋友可以參考下2019-11-11