Skip to content

All topics  /  General

Shortable Table Rows Using Jqury UI Example

General ·

Development teams using “Shortable Table Rows Using Jqury UI Example” in client or internal work can use making best your work time to document project effort and hand-offs, then assess the record against delivered functionality, tests and agreed outcomes.

Validate current syntax, security guidance and supported versions through GitHub before using the example in production.

Hi Guys,

In this blog, I will show how to create table rows sortable using jqury ui example. We will exaplain table rows sortable using jqury ui example. you can easy to table rows using jqury ui.we will sortable table rows using Jqury UI sortable() method.this example create simple table name,course,city.

here the example of table rows sortable using jqury ui

Example


Now In this example create simple html table rows Sortabl using jqury ui. 

<!DOCTYPE html>
<html>
<head>
	<title>Shortable Table Rows Using Jqury Ui - nicesnippets.com</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 - nicesnippets.com</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>

It will help you...

More on this topic