In this tutorial, we will learn Shortable Table Rows Using Jquery UI Example


In this section, you will create table rows sortable using the jquery UI example. We will explain table rows sortable using the jquery UI example. you can easy to table rows using jquery UI. We will sortable table rows using Jquery UI sortable() method. this example creates a simple table name, course, city.


Example:

<!DOCTYPE html>
<html>
<head>
	<title>Shortable Table Rows Using Jqury Ui - rathorji.in</title>
	<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
	<style type="text/css">
	    table th, table td
	    {
	        width: 100px;
	        padding: 5px;
	        border: 1px solid #ccc;
	    }
	    .selected
	    {
	        background-color: #888;
	        color: #fff;
	    }
	</style>
</head>
<body>
 <h1>Shortable Table Rows Using Jqury Ui - rathorji.in</h1>
<table id="tblLocations" width="50%" cellpadding="0" cellspacing="0" border="1">
  <tr>
     <th>S.no</th>
     <th>Name</th>
     <th>Course</th>
     <th>City</th>
   </tr>
   <tr>
     <td>1</td>
     <td>Yogesh singh</td>
     <td>M.SC</td>
     <td>Bhopal</td>
   </tr>
   <tr>
     <td>2</td>
     <td>Sonarika Bhadoria</td>
     <td>BE</td>
     <td>Pune</td>
   </tr>
   <tr>
     <td>3</td>
     <td>Vishal Sahu</td>
     <td>BE</td>
     <td>Indore</td>
   </tr>
   <tr>
     <td>4</td>
     <td>Sunil Patel</td>
     <td>MBA</td>
     <td>Bhopal</td>
   </tr>
   <tr>
     <td>5</td>
     <td>Anil Singh</td>
     <td>MCA</td>
     <td>Delhi</td>
   </tr>
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
    $("#tblLocations").sortable({
        items: 'tr:not(tr:first-child)',
        cursor: 'pointer',
        axis: 'y',
        dropOnEmpty: false,
        start: function (e, ui) {
            ui.item.addClass("selected");
        },
        stop: function (e, ui) {
            ui.item.removeClass("selected");
        }
    });
});
</script>
</body>
</html>


May this example help you.