This article describes the method of JS to implement up and down table rows. Share it for your reference, as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Table row movement</title></head><body><table> <tbody> <tr> <td>1</td> <td>11</td> <td><a href="javascript:void(0)" onclick="moveUp(this)">Move up</a></td> <td><a href="javascript:void(0)" onclick="moveDown(this)">Move down</a></td> </tr> <ttr> <td>2</td> <td>22</td> <td><a href="javascript:void(0)" onclick="moveUp(this)">Move up</a></td> <td><a href="javascript:void(0)" onclick="moveDown(this)">Move down</a></td> </tr> <tr> <td>3</td> <td>33</td> <td><a href="javascript:void(0)" onclick="moveUp(this)">Move up</a></td> <td><a href="javascript:void(0)" onclick="moveDown(this)">Move down</a></td> </tr> <tr> <td>4</td> <td>44</td> <td><a href="javascript:void(0)" onclick="moveUp(this)">Move up</a></td> <td><a href="javascript:void(0)" onclick="moveDown(this)">Move down</a></td> </tr> <tr> <td>5</td> <td>55</td> <td><a href="javascript:void(0)" onclick="moveUp(this)">Move up</a></td> <td><a href="javascript:void(0)" onclick="moveDown(this)">Move down</a></td> </tr> </tbody></table><script type="text/javascript"><!--function moveUp(_a){ var _row = _a.parentNode.parentNode; //If it is not the first line, then swap the order with the previous line var _node = _row.previousSibling; while(_node && _node.nodeType != 1){ _node = _node.previousSibling; } if(_node){ swapNode(_row,_node); }}function moveDown(_a){ var _row = _a.parentNode.parentNode; //If it is not the last line, then swap the order with the next line var _node = _row.nextSibling; while(_node && _node.nodeType != 1){ _node = _node.nextSibling; } if(_node){ swapNode(_row,_node); }}function swapNode(node1,node2){ //Get the parent node var _parent = node1.parentNode; //Get the relative position of the two nodes var _t1 = node1.nextSibling; var _t2 = node2.nextSibling; //Insert node2 to the original node1 position if(_t1)_parent.insertBefore(node2,_t1); else _parent.appendChild(node2); //Insert node1 to the original node2 position if(_t2)_parent.insertBefore(node1,_t2); else _parent.appendChild(node1);}//--></script></body></html>The screenshot of the running effect is as follows:
For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript Search Algorithm Skills", "Summary of JavaScript Data Structure and Algorithm Skills", "Summary of JavaScript traversal algorithms and techniques", "Summary of json operation techniques in JavaScript", "Summary of JavaScript switching effects and techniques", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques" and "Summary of JavaScript mathematical operations usage"
I hope this article will be helpful to everyone's JavaScript programming.