The Mighty Blog

Relocate Selected Table Row Using jQuery

Nov 4

Written by:
11/4/2009

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: jQuery,JavaScript

Trackback Print

Tags:

Categories: ASP.Net

Location: Blogs Parent Separator

The Mighty Blog

2 comment(s) so far...

Re: Relocate Selected Table Row Using jQuery

I found this page while reviewing how to move a row to the head of a table. Thanks. (I'm also using ajax in the background to automatically update a database table at the same time.)

Why didn't you use THEAD and TFOOT tags? I prefer using these tags with tables because it makes grouping/separating the headers and data easy. It also performs a cool function when printing by automatically repeating the table header on subsequent printed pages.

It also allow other plugins to immediately identify the header... like TableTool2 for Firefox:
addons.mozilla.org/en-US/firefox/addon/tabletools2/

You should use classes to highlight the table rows instead of changing the background as you may impact existing zebra striping. Using CSS classes is also faster. Here's how to add zebra striping to the tbody:
$('#tblCustomer table tbody tr').removeClass('odd');
$('#tblCustomer table tbody tr:visible:odd').addClass('odd');