Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Let's take what we have learned so far about jQuery event handling and some other features and build a practical example. What we are going to do is use jQuery to automatically stripe and hover-highlight the contents of an HTML table. So, let me show you what the finished example looks like first. I am going to bring this up in the browser. And please excuse the garish colors; I had to make sure that they were visible on whatever screen you might be using. But you can see that the contents of this table are striped, in alternating lighter and darker colors of green.
And when I hover over rows and the table, the text is bolded and is highlighted in sort of a yellowish, goldish color. So this is what we're going to build. So let me close this. And let's go take a look at the code that's needed to build this example. So let's switch over to the code. All right! Here I have the code for my example. And you can see it's just a simple HTML table with some contents in it.
And before I actually build the code, let's take a look at what the barebones example looks like in the browser. And you can see that it's just a table. There's no special highlighting already applied, and the hover effect is clearly not there. So let's just build from here. So I'm going to close this. Okay, let's go back to the code. Okay, so the first thing I'm going to do is add a couple of CSS style sheets that are going to serve as the stripe colors. So, I'm going to define a class called stripe1, and I'm going to define stripe1 as having a background-color of, let's see, it's going to be very visible, so I'll just say #0f0.
And then I'll copy this and make stripe2, and stripe2 is going to be background color of afa, and we'll save that. And then I need to make a CSS class that's going to serve as the hover highlight. So I'll name that .highlight. And the highlight color, what we're going to do is we're going to have a background color of, let's see, # ffcc00. Yeah, that's a good, nice yellow color.
And then we're going to add in a font-weight of bold. And that's going to make the text bold. Okay. So now we have the CSS styles, so let's go back up to the top of document and fill out our jQuery function and logic to make this happen. So, the first thing we're going to do is handle the striping. So, we're going to use the jQuery selector to get all of the tables. And you can see here, down in the code, that the table itself has an ID of the list.
And so what I'm going to do is use jQuery to get the list table. But I don't want the whole table; all I want is the table rows. So I'm going to use tr, and then I'm going to use one of my filter selectors here called even, so that's going to get me all the even-numbered table rows. And I'm going to add a class of stripe1. So, that's going to put stripe1 on all the even-numbered rows, and then I am going to copy this and paste it, and I am going to do the same thing for the odd rows.
And for the odd rows, I'm going to add stripe2. So, let's just see if this works on what we have so far. So I am going to save this. Let's go back out to the example files. Okay, so far so good. We can see that the stripe is being applied. Just to make sure it's working cross-browser, let's go see it in something else. Let's see it in, say, Firefox. Okay, so Firefox comes out. You can see it's working there too. All right! So far so good. We've got it working cross-browser. Let's go back to the code. All right! So now that we have the table striping working, now let's add that hover highlighting effect.
And so what we're going to do is once again, we're going get a reference to the table, which is theList. Now, we're going to apply it only to all the table rows, not just the even and odd ones. But we're going to use the hover function. And remember that the hover function takes two arguments. So, the first is going to be the function that we want to have happen when the mouse enters, and then we have another function, which is going to be what happens when the mouse leaves. So, when the mouse enters, we're going to say $(this), which at this point is going to be the table row in question, so $(this).toggleClass.
And the class we're going to be toggling is the highlight class, and we're going to be doing the same thing down here in the second function. So now we've got our hover highlighting effect as well. All right! So let's go back out to the browser and see if this works. I'm going to save, back to the browser and refresh. And sure enough, now you can see that the highlighting effect is working, because when I hover over a table row, it changes the background color and the font-weight. All right! So far so good! Okay, now let's take a look at one more feature of jQuery events.
This is called event delegation. And here's how it works. Suppose I want to have the user, whenever they click on one of the table rows, just show a little alert message that has the text contents of the table row. Now, there's a couple of ways I could do that. One way to do that would be to write theList, and then tr again, then say on, on click.
Let's have a function, which is an event handler, so it takes an event handler argument. And inside this we're going to say alert and $(this).text, and that will get the text content. That will work; however, there's a problem here. And the problem is that this right here, this selector, is going to go through and assign click handlers to every single one of the table rows.
Now, for a table that only has 10, 12 rows, that's okay. But imagine I had a table with lots and lots of rows, or imagine this wasn't a table; it was a whole bunch of divs. That's going to create a whole bunch of event handlers on a whole bunch of objects that basically just do the same thing. What I'd like to be able to do is take advantage of something called event bubbling in the browser, and just tell jQuery that whenever an event comes from a certain kind of element but makes its way back up to the element's parent, have the parent handle the event, but only if it came from a certain kind of descendent.
So, what I'm going to say here is get me the table, and I'm going to attach the click handler to the table itself. But I'm going to use the delegate trick that we talked about earlier to say only handle events when they come from table rows. So, if a click event gets triggered on the table and it came from a table row, then execute this function. So now I've only got one event handler, and it's sitting on the top-level parent table, and it's listening for click events that came from table rows.
So rather than having a table with a thousand rows in it and having a thousand separate click handlers, I've only got one click handler, and it's listening for clicks that come from within table rows. And browsers handle this automatically. When something like a click event happens on an element and the element doesn't handle that event, such as a click, that click will then bubble up the DOM until it gets to a parent element which does have an event handler. And so by attaching the event handler for click directly to the table itself, I only have one place where I need to listen for it. All right! So let's save, and let's go back out to the browser. Let's refresh.
All right! So, there is the striping, there is a hovering, and now when I click, you see I get an alert that has the text content of the row. In this case, it's bread, and it's $0.99, and I can do it here. And you can see I'm getting different values for each one of the rows that I'm clicking on. So, only one event handler, and it's listing for events from that particular table row, and that is what event delegation is all about. That brings us to the close of jQuery events; time to move on to our next chapter.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101231 Viewers
61 Video lessons · 87993 Viewers
71 Video lessons · 71866 Viewers
56 Video lessons · 103711 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.