Movable Table Rows

by ChrisStanyon

HTML

<table id="myTable">
  <tr><td>Row 1</td><td><a href="#" class="up">up</a> | <a href="#" class="down">down</a></td></tr>
  <tr><td>Row 2</td><td><a href="#" class="up">up</a> | <a href="#" class="down">down</a></td></tr>
  <tr><td>Row 3</td><td><a href="#" class="up">up</a> | <a href="#" class="down">down</a></td></tr>
  <tr><td>Row 4</td><td><a href="#" class="up">up</a> | <a href="#" class="down">down</a></td></tr>
  <tr><td>Row 5</td><td><a href="#" class="up">up</a> | <a href="#" class="down">down</a></td></tr>
</table>

JavaScript

$(document).ready(function () {
	$('#myTable').on('click', '.up, .down', function () {
		shiftRow($(this));
	});
});

function shiftRow(button) {
	var row = button.parents("tr:first");

	if(button.is('.up')){
		row.insertBefore(row.prev());
	} else {
		row.insertAfter(row.next());
	}
};