02-Mar-2020
.
Admin
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...
#Jqury UI
