• About Me
  • Skills
  • Education
  • Employment
  • Portfolio
  • Blog
  • Contact

Drag and Drop HTML Table Rows With jQuery

23 May 2019 / By Faizan Yasin
  • Home
  • Drag and Drop HTML Table Rows With jQuery
Quick Intro: Drag and Drop, re-ordering of HTML Table Rows.  Working Demo I love simple, easy things and love even more when those things involve programming!   When needing to re-arrange table rows in an HTML table via drag & drop UI/UX, it doesn’t get much easier than jQuery UI.  This basic library make this task so quick you can move on to more pressing issues.  Here is the working demo. First, you will need to add jQuery UI to your file:
1
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
You will also need the core jQuery library file, but I will assume you already have that somewhere at this point.  If not, make sure you insert this ahead of the UI file script.  Since I already have my own CSS on the table I’m not going to include the jQuery UI CSS file either. Then all we need to do is add the jQuery sortable() to our table on the <tdbody>  element:
1
2
3
<script type="text/javascript">
  $('tbody').sortable();
</script>
That’s it!  The finished code is below and your table rows are now drag & drop and sortable! Working Demo & Complete Source Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Easy Drag and Drop HTML Table Rows With jQuery</title>
    <!-- Bootstrap core CSS -->
    <link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="https://getbootstrap.com/docs/4.0/examples/starter-template/starter-template.css" rel="stylesheet">
  </head>
  <body>
    <main role="main" class="container">
     <table class="table table-striped table-hover">
        <thead class="thead-dark">
            <tr>
                <th>Row</th>
                <th>Name</th>
                <th>ID Number</th>
                <th>Location</th>
                <th>Date</th>
            </tr>
        </thead>
        <tbody>
            <tr>
              <td>01</td>
              <td>Rahim Hawkins</td>
              <td>1640060874099</td>
              <td>Bursa</td>
              <td>May 29, 2017</td>
            </tr>
            <tr>
              <td>02</td>
              <td>Carter James</td>
              <td>1672062705399</td>
              <td>Geer</td>
              <td>Mar 30, 2019</td>
            </tr>
            <tr>
              <td>03</td>
              <td>Merritt Fernandez</td>
              <td>1669120981299</td>
              <td>Gooik</td>
              <td>Jun 3, 2017</td>
            </tr>
            <tr>
              <td>04</td>
              <td>Ross Robbins</td>
              <td>1640092139299</td>
              <td>Lint</td>
              <td>Mar 22, 2018</td>
            </tr>
            <tr>
              <td>05</td>
              <td>Allistair Warren</td>
              <td>1690102625999</td>
              <td>Bicester</td>
              <td>Dec 22, 2017</td>
            </tr>
            <tr>
              <td>06</td>
              <td>Yoshio Finch</td>
              <td>1643051322099</td>
              <td>Baulers</td>
              <td>Sep 15, 2018</td>
            </tr>
            <tr>
              <td>07</td>
              <td>Wylie Holland</td>
              <td>1662122249099</td>
              <td>Penicuik</td>
              <td>Apr 22, 2018</td>
            </tr>
            <tr>
              <td>08</td>
              <td>Maxwell Lindsay</td>
              <td>1637021237499</td>
              <td>St. John's</td>
              <td>Nov 30, 2018</td>
            </tr>
            <tr>
              <td>09</td>
              <td>Orson Schneider</td>
              <td>1610061567599</td>
              <td>Gresham</td>
              <td>Mar 7, 2018</td>
            </tr>
            <tr>
              <td>10</td>
              <td>Ahmed Puckett</td>
              <td>1626021923499</td>
              <td>Valbrevenna</td>
              <td>Jul 20, 2018</td>
            </tr>
        </tbody>
    </table>
    </main><!-- /.container -->
    <!-- Bootstrap & Core Scripts -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
    <script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript">
      $('tbody').sortable();
    </script>
  </body>
</html>
For more assistance or if you need Opencart developer  Contact me.  
Tags
drag to reorder, reorder, reorder table rows, sortable tables

faizanyasn
Fiverr
Seller
I am Web developer, I’ve been in this field for about 6 years developing WordPress websites and throughout that time I’ve helped numerous businesses grow, attract new audiences and increase their revenue. I aim at delivering an outstanding experience and building long-term, mutually beneficial relationships with my clients.
My mission is to create a solution that helps you stand out from the competition and increase revenue. I can help with all aspects from road mapping the requirements of the site.

Categories
  • blog
  • ecommerce
  • Facebook
  • facebook audience insights
  • Fiverr
  • Freelancing
  • HTml
  • Meta Settings
  • Meta Tags
  • Opencart
  • Opencart Website
  • Payment gateway
  • SEO
  • Smm
  • social media marketing
  • Targetting facbook audiance
  • Uncategorized
  • Wordpress
About Me
about-me
Faizan Yasin

Hello, I am quite experienced and responsible developer with a technical background in Information Technology. I have been over four years in Website development. I’m looking for long-term and a win-win partnership. Hard work and dedication differ me from others. I’m available 24/7 no matter what and respond immediately. I am 100% responsible for what I’m doing because my goal is to make a customer happy. I’m looking forward to furthering communications!

Popular Post
  • Create A WPBakery Visual Composer Add-OnTuesday - March 30, 2021
  • Visual Composer: vc_map field examplesTuesday - March 30, 2021
  • Fix create_function() deprecated PHP function in WordPressWednesday - May 27, 2020
  • What to do if the “Network Admin” menu item not…Tuesday - August 20, 2019
  • PayPal Payment Gateway Integration in CodeIgniterMonday - July 29, 2019
Tags
All meta tags audiance insights Authorize.net Authorize.net integration custom wordpress development drag to reorder ecommerce development ecommerce store facebook facebook audiance insights fiverr fiverr wordpress fiverr wordpress customization freelancer html meta tags Meta tags multi site bug fix multisite network admin On page SEO Onpage seo opencart opencart development opengraph tags paypal codeigniter Paypal integration paypal integration codeigniter php php paypal integration reorder reorder table rows sortable tables wordpress development on fiverr
© 2018 All rights reserved.