Shortable Table Rows Using Jqury UI Example

Jqury UI

Nicesnippets

275

26-02-2020


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...


Recommended Posts