title: swap table row using jQuery and save the new row order in database to get the same order when you leave the page
body: <p>I have a requirement where I need to swap the table row on click of link.
   I have used the below jquery and html  code to swap the rows up and down.</p>
  
  <p>My table ends up looking like this:</p>
  
  <pre><code>&lt;html&gt;
     &lt;head&gt;
        &lt;title&gt;Swap table rows using Jquery&lt;/title&gt;
        &lt;script src="http://code.jquery.com/jquery-1.5.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
        &lt;script type="text/javascript"&gt;
           $(document).ready(function(){
           $(".up,.down,.top,.bottom").click(function(){
              var row = $(this).parents("tr:first");
              if ($(this).is(".up")) {
                  row.insertBefore(row.prev());
              } else if ($(this).is(".down")) {
                  row.insertAfter(row.next());
              } else if ($(this).is(".top")) {
                  row.insertBefore($("table tr:first"));
              }else {
                  row.insertAfter($("table tr:last"));
              }
           });
           });
        &lt;/script&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;table&gt;
           &lt;tr&gt;
              &lt;td&gt;One&lt;/td&gt;
              &lt;td&gt;
                 &lt;a href="#" class="up"&gt;Up&lt;/a&gt;
                 &lt;a href="#" class="down"&gt;Down&lt;/a&gt;
                 &lt;a href="#" class="top"&gt;Top&lt;/a&gt;
                 &lt;a href="#" class="bottom"&gt;Bottom&lt;/a&gt;
              &lt;/td&gt;
           &lt;/tr&gt;
           &lt;tr&gt;
              &lt;td&gt;Two&lt;/td&gt;
              &lt;td&gt;
                 &lt;a href="#" class="up"&gt;Up&lt;/a&gt;
                 &lt;a href="#" class="down"&gt;Down&lt;/a&gt;
                 &lt;a href="#" class="top"&gt;Top&lt;/a&gt;
                 &lt;a href="#" class="bottom"&gt;Bottom&lt;/a&gt;
              &lt;/td&gt;
           &lt;/tr&gt;
           &lt;tr&gt;
              &lt;td&gt;Three&lt;/td&gt;
              &lt;td&gt;
                 &lt;a href="#" class="up"&gt;Up&lt;/a&gt;
                 &lt;a href="#" class="down"&gt;Down&lt;/a&gt;
                 &lt;a href="#" class="top"&gt;Top&lt;/a&gt;
                 &lt;a href="#" class="bottom"&gt;Bottom&lt;/a&gt;
              &lt;/td&gt;
           &lt;/tr&gt;
           &lt;tr&gt;
              &lt;td&gt;Four&lt;/td&gt;
              &lt;td&gt;
                 &lt;a href="#" class="up"&gt;Up&lt;/a&gt;
                 &lt;a href="#" class="down"&gt;Down&lt;/a&gt;
                 &lt;a href="#" class="top"&gt;Top&lt;/a&gt;
                 &lt;a href="#" class="bottom"&gt;Bottom&lt;/a&gt;
              &lt;/td&gt;
           &lt;/tr&gt;
           &lt;tr&gt;
              &lt;td&gt;Five&lt;/td&gt;
              &lt;td&gt;
                 &lt;a href="#" class="up"&gt;Up&lt;/a&gt;
                 &lt;a href="#" class="down"&gt;Down&lt;/a&gt;
                 &lt;a href="#" class="top"&gt;Top&lt;/a&gt;
                 &lt;a href="#" class="bottom"&gt;Bottom&lt;/a&gt;
              &lt;/td&gt;
           &lt;/tr&gt;
        &lt;/table&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>but my problem is this does not save the order of the rows once you leave the page instead of doing this every time the row is swapped, I want to save the table once, when the "Save"  button or some link  is pressed. Is this possible to implement?</p>