JQuery實(shí)現(xiàn)table中tr上移下移的示例(超簡單)

更新時(shí)間：2018年01月08日 14:44:06 作者：一包大豫竹

下面小編就為大家分享一篇JQuery實(shí)現(xiàn)table中tr上移下移的示例(超簡單)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

表格樣式

<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(); //獲取當(dāng)前<tr>
  var prev = current.prev();  //獲取當(dāng)前<tr>前一個(gè)元素
  if (current.index() > 0) { 
    current.insertBefore(prev); //插入到當(dāng)前<tr>前一個(gè)元素前
  } 
} 
// 下移 
function moveDown(obj) { 
  var current = $(obj).parent().parent(); //獲取當(dāng)前<tr>
  var next = current.next(); //獲取當(dāng)前<tr>后面一個(gè)元素
  if (next) { 
    current.insertAfter(next);  //插入到當(dāng)前<tr>后面一個(gè)元素后面
  } 
}

以上這篇JQuery實(shí)現(xiàn)table中tr上移下移的示例(超簡單)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

使用jquery.upload.js實(shí)現(xiàn)異步上傳示例代碼
這篇文章主要介紹了使用jquery.upload.js實(shí)現(xiàn)異步上傳的示例代碼,需要的朋友可以參考下
2014-07-07
Jquery zTree 樹控件異步加載操作
這篇文章主要介紹了Jquery zTree 樹控件異步加載操作，學(xué)習(xí)Jquery zTree異步加載，zTree實(shí)現(xiàn)一套能完成大部分常用功能的 Tree插件，感興趣的小伙伴們可以參考一下
2016-02-02
Jsonp 跨域的原理以及Jquery的解決方案
JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允許請求當(dāng)前源（域名、協(xié)議、端口）的資源。
2011-06-06
jQuery自定義組件(導(dǎo)入組件)
這篇文章主要介紹了jQuery自定義導(dǎo)入組件的相關(guān)資料,包括組件js，組件css及組件引用的內(nèi)容，非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-11-11
jQuery中extend函數(shù)詳解
這篇文章主要介紹了jQuery中extend函數(shù)詳解,十分詳細(xì)，需要的朋友可以參考下
2015-02-02
jquery動(dòng)態(tài)切換背景圖片的簡單實(shí)現(xiàn)方法
這篇文章主要介紹了jquery動(dòng)態(tài)切換背景圖片的簡單實(shí)現(xiàn)方法,涉及jQuery自定義函數(shù)結(jié)合時(shí)間函數(shù)動(dòng)態(tài)變換背景圖片的相關(guān)技巧,需要的朋友可以參考下
2016-05-05
jquery checkbox全選反選效果代碼
jquery checkbox全選反選效果代碼,需要的朋友可以參考下。
2009-11-11
jQuery實(shí)現(xiàn)炫酷的鼠標(biāo)軌跡特效
本文給大家分享的是一段jQuery實(shí)現(xiàn)炫酷的鼠標(biāo)軌跡的特效代碼，希望小伙伴們能夠喜歡。
2015-02-02
鋒利的jQuery 第三章章節(jié)總結(jié)的例子
改寫《鋒利的jQuery》第三章章節(jié)總結(jié)的例子
2010-03-03
jquery使用echarts實(shí)現(xiàn)有向圖可視化功能示例
這篇文章主要介紹了jquery使用echarts實(shí)現(xiàn)有向圖可視化功能,結(jié)合完整實(shí)例形式分析了jquery的echarts.js插件實(shí)現(xiàn)有向圖可視化相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下
2019-11-11