Shortable Table Rows Using jquery UI Example

Mar 30, 2021 . 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...

#Jquery #Jquery UI

You might also like...