» » Use jQuery to achieve the table rows shift down and top

 

Use jQuery to achieve the table rows shift down and top

Author: bamboo06 on 8-08-2015, 01:28, views: 1313

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.

Category: Javascript / CSS

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 0 Comments
  • 0 Articles
26 October 2017 04:58

Melissa A. Dobson

Reply
  • Group: Guests
  • –†Registered date: --
  • Status:
 
Aah the world of programming lol. Been always interested in it but im glad i chose how to write a school paper over it.Its so much simpler. You should make a dummies section on your site too, as in to guide newbies. Thanks.

<
  • 0 Comments
  • 0 Articles
8 December 2017 04:26

rossidavid

Reply
  • Group: Guests
  • –†Registered date: --
  • Status:
 
Hello, please respond back if you read my comments. For sure, I wish I could write like you because your craft is enough to be an excellent writer, thanks!

best essay writing sites

Information
Comment on the news site is possible only within (days) days from the date of publication.