Hello all those in the Geekdom. Bob the Geek here with a quick post about a useful little feature.

A co-worker had asked me about using jQuery to highlight (change the background color of) a form row when the user focused on any of the fields in that particular row. So, I decided to write a quick post on how to do this. It is really simple and provides a nice bit of extra polish to your forms. So here ya go:

Table Based Forms

 We will assume you have a number of textbox and select fields, as well as a submit button, all laid out in a standard HTML table. If so, then you want the background color of the entire table row to change when any INPUT or SELECT object is focused on, with the exception of buttons. Additionally, you want the background color of that row to change back when the focus is removed from the field.

All of this can be accomplished using the following jQuery script:

        $(document).ready(function () {
            //we want to highlight the row only if the item focused on is a textbox,
            //password or select list. Buttons should be ignored...
            $(":input").not(":button")
                .focus(function () {
                    //highlight the containing table row...
                    $(this).parents("tr").css({ 'background': '#14BDF4' });
                })
                .blur(function () {
                    //remove the background attribute from the inline style...
                    $(this).parents("tr").css({ 'background': '' });
                });
        });

So let’s take a quick look at what is happening here. Our selector looks like this:

$(":input").not(":button")

Basically we are first getting a collection of all input elements, using the :input custom filter selector provided by jQuery. This selector will select all form elements on the page of the type input, select, textarea and button. Of course, in our scenario, we want to ignore buttons.

So we add to our selector by using the not() method, which will allow us to remove items from our collection by using any valid jQuery selector. In this case, we will make use of :button, which is another custom jQuery filter selector and selects any button on the page defined with input type = submit, reset or button as well as button. By combining this with our not() method, we are essentially removing any buttons from the object array.

So,  now that we have selected all form elements on the page, other than buttons, we simply need to bind both the focus and blur events to each of these. Thankfully, jQuery makes this easy, especially due to the chaining feature which allows us to apply multiple events to any given object.

On the focus event, we want to change the background color of the table row that ultimately contains the focused object. In jQuery we can do this by using the parents() method. This should not be confused with the parent() method, which will only return the direct parent of any wrapped elements, in this case the focused form field.

The parents() method will return a wrapped set consisting of ALL ancestors of the wrapped element. This will include not only the direct parent, but its parent and so on until, but not including, the document root. Of course, don’t want to affect all of this, so we have to use a selector to recuce the wrapped set. We can accomplish this simply by adding “tr” to the parents() method. Now we will only select the table row that contains the focused form field.

Now all thats left to do is change the background color, which is done simply using the jQuery css() method, which allows you to add or remove inline css style from all elements in a wrapped set. One of the great things about this method is that to remove an inline style, you simply need to specify the attribute and then set its value to be two single apostrophes (basically, an empty string).

So on our focus event, we set the inline background style to be “#14BDF4″, which will make our background a nice, bright aqua blue. Then on our blur event, we simply set the background attribute to a blank string which will effectively return it to its original value.

Click here to see a working example.

This feature is also very easy to apply in a form layed out using DIVs or some other method. At the end of the day, you simply need to write your initial selector to return only the single parent element you are interested in, and everything else should work the same.

As usual feel free to let me know if you have any questions.

Cool Tricks · jQuery · Web Development

6 comments

Easy jQuery Locking Table Headers (They even Toggle!) >>