Tables with jquery – Moving HTML table rows up,down or delete

jquery-and-tablesWe can easily move rows up down or delete within HTML table using jquery. Here is an example to show the following functions using jquery with clickable buttons.

  • move rows up within the HTML table
  • move rows down within the HTML table
  • delete rows within the HTML table
<!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=utf-8" />
<title>TABLE - UP | DOWN | DELETE</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="scripts/move.js"></script>
</head>
<body>
<form id="form1" method="get" action="script.php" >
<table width="71%" class="horizontal">
<thead>
<tr>
<th>First name</th> <th>Last name</th><th>Date of birth</th><th>Login</th> <th>Action buttons</th>
</tr>
</thead>
<tbody>
<tr>

<td>One</td>
<td>One</td>
<td>One</td>
<td>One</td>
<td>
<a href="#" class="up"></a>
<a href="#" class="down"></a>
<a href="#" class="delrow"></a>
</td>
</tr>
<tr>

<td>Two</td>
<td>Two</td>
<td>Two</td>
<td>Two</td>
<td>
<a href="#" class="up"></a>
<a href="#" class="down"></a>
<a href="#" class="delrow"></a>
</td>
</tr>
<tr>
<td>Three</td>
<td>Three</td>
<td>Three</td>
<td>Three</td>
<td>
<a href="#" class="up"></a>
<a href="#" class="down"></a>
<a href="#" class="delrow"></a>
</td>
</tr>
<tr>
<td>Four</td>
<td>Four</td>
<td>Four</td>
<td>Four</td>
<td>
<a href="#" class="up"></a>
<a href="#" class="down"></a>
<a href="#" class="delrow"></a>
</td>
</tr>
<tr>
<td>Five</td>
<td>Five</td>
<td>Five</td>
<td>Five</td>
<td>
<a href="#" class="up"></a>
<a href="#" class="down"></a>
<a href="#" class="delrow"></a>
</td>
</tr>
</tbody>
</table>
<div id="BtnCnt">
<input type="submit" name="submit" value="Send" class="button"/>
</div>
</form>
</body>
</html>

jQuery
[sourcecode language="javascript"]
$(document).ready(function(){
$(".up,.down").click(function(){
var row = $(this).parents("tr:first");
if ($(this).is(".up") ) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
});
$(".delrow ").click(function() {
$(this).parents("tr").remove();
});
});
[/sourcecode]

Download Source

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>