<table id="table1" style="background-color: Lime" class="displayTable">
      <caption>Table 1</caption>
      <thead>
          <tr>
              <th>One</th>
              <th>Two</th>
              <th>Three</th>
          </tr>
      </thead>
      <tbody>
          <tr id="row1">
              <td>R1 C1</td>
              <td>R1 C2</td>
              <td>
                  <a href="#" id="row1Link" class="rowLink">Move Me</a> |
                  <a href="#" id="row1Up" class="rowUp">Up</a> | 
                  <a href="#" id="row1Down" class="rowDown">Down</a>
              </td>
          </tr>
          <tr id="row2">
              <td>R2 C1</td>
              <td>R2 C2</td>
              <td>
                  <a href="#" id="row2Link" class="rowLink">Move Me</a> |
                  <a href="#" id="row2Up" class="rowUp">Up</a> | 
                  <a href="#" id="row2Down" class="rowDown">Down</a>
              </td>
          </tr>
          <tr id="row3">
              <td>R3 C1</td>
              <td>R3 C2</td>
              <td>
                  <a href="#" id="row3Link" class="rowLink">Move Me</a> |
                  <a href="#" id="row3Up" class="rowUp">Up</a> | 
                  <a href="#" id="row3Down" class="rowDown">Down</a>
              </td>
          </tr>
      </tbody>
  </table>

<script>
    
    // Setup the "Up" links
    $(".rowUp").click(function () {
        var row = $(this).closest("tr");
     
        // Get the previous element in the DOM
        var previous = row.prev();
     
        // Check to see if it is a row
        if (previous.is("tr")) {
            // Move row above previous
            row.detach();
            previous.before(row);
     
            // draw the user's attention to it
            row.fadeOut();
            row.fadeIn();
        }
        // else - already at the top
    });
    
    // Setup the "Down" links
    $(".rowDown").click(function () {
        var row = $(this).closest("tr");
     
        // Get the next element in the DOM
        var previous = row.next();
     
        // Check to see if it is a row
        if (previous.is("tr")) {
            // Move row after next
            row.detach();
            previous.after(row);
     
            // draw the user's attention to it
            row.fadeOut();
            row.fadeIn();
        }
        // else - already at the top
    });
</script>

<table>
    <tr>
        <td>One</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
            <a href="#" class="top">Top</a>
            <a href="#" class="bottom">Bottom</a>
        </td>
    </tr>
    <tr>
        <td>Two</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
            <a href="#" class="top">Top</a>
            <a href="#" class="bottom">Bottom</a>
        </td>
    </tr>
    <tr>
        <td>Three</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
            <a href="#" class="top">Top</a>
            <a href="#" class="bottom">Bottom</a>
        </td>
    </tr>
    <tr>
        <td>Four</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
            <a href="#" class="top">Top</a>
            <a href="#" class="bottom">Bottom</a>
        </td>
    </tr>
    <tr>
        <td>Five</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
            <a href="#" class="top">Top</a>
            <a href="#" class="bottom">Bottom</a>
        </td>
    </tr>
</table>
<script>
$(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"));
        }
    });
});
</script>

<table>
<tbody>
<tr class="MoveableRow">
<td>Data 1</td>
<td><span class="down_button">down</span><span class="up_button">up</span></td>
</tr>
<tr></tr>
<tr class="MoveableRow">
<td>Data 2</td>
<td><span class="down_button">down</span><span class="up_button">up</span></td>
</tr>
<tr></tr>
</tbody>
</table>

<script>
$('.down_button').live('click', function () {
    var rowToMove = $(this).parents('tr.MoveableRow:first');
    var next = rowToMove.next('tr.MoveableRow')
    if (next.length == 1) { next.after(rowToMove); }
});
 
$('.up_button').live('click', function () {
    var rowToMove = $(this).parents('tr.MoveableRow:first');
    var prev = rowToMove.prev('tr.MoveableRow')
    if (prev.length == 1) { prev.before(rowToMove); }
});
</script>