GOOCODE - Find your code/scripts

2 When operating the data list, you need to adjust the order of data rows, move up and down the line as the top line data, etc., these operations can be done by clicking a button in the front, and along with the simple dynamic effects, easy implement sorting tabular data.

HTML
The page is a simple data table, we were placed in the data row "Up", "Down" and "top" three links, and three class attributes are defined, we have to implement these operations through jQuery.

		<table class="table">
			<tr>
				<td>Use CSS + Cookie to realize fixed footer banner</td>
				<td>08-08-2015</td>
				<td><a href="#" class="up">up</a> <a href="#" class="down">down</a> <a href="#" class="top">top</a></td>
			</tr>
			<tr>
				<td>Use pure CSS3 to create beautiful price table</td>
				<td>07-08-2015</td>
				<td><a href="#" class="up">up</a> <a href="#" class="down">down</a> <a href="#" class="top">top</a></td>
			</tr>
			<tr>
				<td>Talk about responsive front-end web design</td>
				<td>24-05-2015</td>
				<td><a href="#" class="up">up</a> <a href="#" class="down">down</a> <a href="#" class="top">top</a></td>
			</tr>
			<tr>
				<td>6 popular clone iOS game source code</td>
				<td>15-05-2015</td>
				<td><a href="#" class="up">up</a> <a href="#" class="down">down</a> <a href="#" class="top">top</a></td>
			</tr>
		</table>

jQuery
We need to pre-load the jQuery library file, and then were bound up, down and top click event three operations. In "Up" for example, when clicked, clicked to get the current line content, and tr, then determine the line is not the first line, in front of, if not the first row, then the row is inserted into the line, to achieve the purpose of exchange. Of course, we can add to the line fadeOut () and fadeIn () transition effects, so it looks more vivid and more, otherwise the process will move flashed. "Down" and "Top" operating procedures are similar, look at the code:

$(function(){
	//up
	var $up = $(".up")
    $up.click(function() {
        var $tr = $(this).parents("tr");
        if ($tr.index() != 0) {
			$tr.fadeOut().fadeIn();
			$tr.prev().before($tr);
			
        }
    });
    //down
    var $down = $(".down");
    var len = $down.length;
    $down.click(function() {
        var $tr = $(this).parents("tr");
        if ($tr.index() != len - 1) {
			$tr.fadeOut().fadeIn();
            $tr.next().after($tr);
        }
    });
	//top
	var $top = $(".top");
	$top.click(function(){
		var $tr = $(this).parents("tr");
		$tr.fadeOut().fadeIn();
		$(".table").prepend($tr);
		$tr.css("color","#f60");
	});
});

Of course, it should be combined with the practical application of your project, in the operation "Up", "Down" and "Top" When complete, the daemon should be Ajax asynchronous interaction, ensure genuine sorting data is recorded backstage, after then refreshes display the new results will be sorted, this is no longer a detailed explanation of the asynchronous operation.