JQuery operates the position of tr in the table

This time I bring you JQueryOperation of the position of tr in the table, what are the precautions for JQuery to operate the position of tr in the table, the following is a practical case, let's take a look one time.

TableStyle

<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 code

// 上移 
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>后面一个元素后面
  } 
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How does the jquery plug-in print the page content

How does the jQuery running page trigger the click event by default

Detailed explanation of tree shape in layui about value passing

The above is the detailed content of JQuery operates the position of tr in the table. For more information, please follow other related articles on the PHP Chinese website!