Will "the Mighty" Strohl

Relocate Selected Table Row Using jQuery

This blog entry is a response to a request from an earlier blog entry, where I used jQuery to search an HTML table.  The request as I understand it is this.  How can I allow the website visitor click on a row in a HTML table, and relocate that row to the top of the table?  Even though I cannot think of a use for this functionality myself, I was intrigued.  So here is how I accomplish that task.

First of all, I needed a table to test this on.  I used the example from the aforementioned post, as shown below:

<table id="tblCustomer" cellspacing="0" cellpadding="2" border="1" style="width: 500px;">
    <tbody>
        <tr id="rowHeader" style="font-weight: bold;">
            <td>First</td>
            <td>Last</td>
            <td>Address</td>
            <td>City</td>
            <td>State</td>
        </tr>
        <tr>
            <td>John</td>
            <td>Dough</td>
            <td>123 Main Street</td>
            <td>Orlando</td>
            <td>Florida</td>
        </tr>
        <tr>
            <td>Jane</td>
            <td>Dough</td>
            <td>4367 South Washington Avenue</td>
            <td>Bartow</td>
            <td>California</td>
        </tr>
        <tr>
            <td>Bart</td>
            <td>Thompson</td>
            <td>531 Townsend Circle</td>
            <td>Atlanta</td>
            <td>Georgia</td>
        </tr>
        <tr>
            <td>Sherry</td>
            <td>Simpson</td>
            <td>3346 Presario Lane, Apt. 123</td>
            <td>Seattle</td>
            <td>Washington</td>
        </tr>
        <tr>
            <td>Matt</td>
            <td>Damon</td>
            <td>300 Pounds Street</td>
            <td>Boston</td>
            <td>Massachusetts</td>
        </tr>
    </tbody>
</table>

This table is just a small example of the kind of data you might be working with.  In it, we have a listing of “customers” that are displayed.  Note that there is a header row that gives context to the information in each column.

The next thing I did was something that I could have and should have done using actual CSS.  I added some visual context to the rows to help you visualize what happened.  I did it this way to make it easier to add to my blog.

function setCssRules() {
    // this would be better implemented in a CSS file
    jQuery('#tblCustomer tr:not(\'#rowHeader\')')
        .css('cursor', 'pointer')
        .mouseover(function() {
            jQuery(this).css('background-color', '#c0c0c0');
        })
        .mouseout(function() {
            jQuery(this).css('background-color', '#ffffff');
        });
}

Looking at the previous code, I just make the little hand show up when the mouse is over a table row.  Then, I change the background color for each row, depending on if the mouse is over the row or not.

I used the jQuery(“#tblCustomer tr:not('#rowHeader')”) selector to exclude the first row in the table from the interactive changes.

Next, I add the following jQuery snippet that grabs the clicked row and moves it to the top of the table.

// wire up the logic to make our function work
jQuery('#tblCustomer tr:not(\'#rowHeader\')').click(function() {
    // get a reference to the chosen row
    var oRow = this;
    // remove the row from the table
    jQuery(this).remove();
    // add the row to the top of the table
    jQuery('#tblCustomer').prepend(oRow);
    // backtrack to put the header row back at the top of chosen row
    jQuery('#rowHeader').prependTo('#tblCustomer');
    // reset the CSS rules
    jQuery(this).css('background-color', '#ffffff');
    setCssRules();
});

Notice that the selector is the same as before.  Moving the row to the top of the table is easy.  However, this table has a header row, so we need to take that into account.  The method I used here allows us to move the header row back to the top after the selected row is moved.  Finally, we fix the CSS to revert back to our original CSS changes.

Here is the code in action!

First Last Address City State
John Dough 123 Main Street Orlando Florida
Jane Dough 4367 South Washington Avenue Bartow California
Bart Thompson 531 Townsend Circle Atlanta Georgia
Sherry Simpson 3346 Presario Lane, Apt. 123 Seattle Washington
Matt Damon 300 Pounds Street Boston Massachusetts

That’s it!  I hope this helps you.  Enjoy the complete snippet here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled</title>
    <script language="javascript" type="text/javascript" src="/Resources/shared/scripts/jquery/jquery.min.js"></script>
   1:  
   2:     <script language="javascript" type="text/javascript">jQuery.noConflict();
</script>
   1:  
   2: </head>
   3: <body>
   4:     <table id="tblCustomer" cellspacing="0" cellpadding="2" border="1" style="width: 500px;">
   5:         <tbody>
   6:             <tr id="rowHeader" style="font-weight: bold;">
   7:                 <td>First</td>
   8:                 <td>Last</td>
   9:                 <td>Address</td>
  10:                 <td>City</td>
  11:                 <td>State</td>
  12:             </tr>
  13:             <tr>
  14:                 <td>John</td>
  15:                 <td>Dough</td>
  16:                 <td>123 Main Street</td>
  17:                 <td>Orlando</td>
  18:                 <td>Florida</td>
  19:             </tr>
  20:             <tr>
  21:                 <td>Jane</td>
  22:                 <td>Dough</td>
  23:                 <td>4367 South Washington Avenue</td>
  24:                 <td>Bartow</td>
  25:                 <td>California</td>
  26:             </tr>
  27:             <tr>
  28:                 <td>Bart</td>
  29:                 <td>Thompson</td>
  30:                 <td>531 Townsend Circle</td>
  31:                 <td>Atlanta</td>
  32:                 <td>Georgia</td>
  33:             </tr>
  34:             <tr>
  35:                 <td>Sherry</td>
  36:                 <td>Simpson</td>
  37:                 <td>3346 Presario Lane, Apt. 123</td>
  38:                 <td>Seattle</td>
  39:                 <td>Washington</td>
  40:             </tr>
  41:             <tr>
  42:                 <td>Matt</td>
  43:                 <td>Damon</td>
  44:                 <td>300 Pounds Street</td>
  45:                 <td>Boston</td>
  46:                 <td>Massachusetts</td>
  47:             </tr>
  48:         </tbody>
  49:     </table>
  50:     <script language="javascript" type="text/javascript">
  51:         jQuery(document).ready(function() {
  52:  
  53:             setCssRules();
  54:  
  55:             // wire up the logic to make our function work
  56:             jQuery('#tblCustomer tr:not(\'#rowHeader\')').click(function() {
  57:  
  58:                 // get a reference to the chosen row
  59:                 var oRow = this;
  60:                 // remove the row from the table
  61:                 jQuery(this).remove();
  62:                 // add the row to the top of the table
  63:                 jQuery('#tblCustomer').prepend(oRow);
  64:                 // backtrack to put the header row back at the top of chosen row
  65:                 jQuery('#rowHeader').prependTo('#tblCustomer');
  66:                 // reset the CSS rules
  67:                 jQuery(this).css('background-color', '#ffffff');
  68:                 setCssRules();
  69:             });
  70:  
  71:         });
  72:  
  73:         function setCssRules() {
  74:             // this would be better implemented in a CSS file
  75:             jQuery('#tblCustomer tr:not(\'#rowHeader\')')
  76:                 .css('cursor', 'pointer')
  77:                 .mouseover(function() {
  78:                     jQuery(this).css('background-color', '#c0c0c0');
  79:                 })
  80:                 .mouseout(function() {
  81:                     jQuery(this).css('background-color', '#ffffff');
  82:                 });
  83:         }
  84:     
</script>
</body>
</html>
Technorati Tags: ,


blog comments powered by Disqus