Join Joe Marini for an in-depth discussion in this video Getting practical: Table striping and highlighting, part of Prototype and script.aculo.us Essential Training.
- View Offline
- Exercise Files
Let's take what we've learnt about events and Prototype and build a practical example.…You can see here in the IDE I've got a file open and this is the…TableStripe_start.HMTL example.…So, let's go to the preview.…So what I have here is a table of items.…What we are going to do is use Prototype to perform alternate row table striping…and making so that when you hover over a table row in the table it highlights.…
Let's build that example. Let's go back to source code.…So, a couple of things to point out.…First, I have defined a couple of CSS classes that we can use to perform the…striping and highlighting.…So, I've got a class for stripe1 and a class for stripe2 and this will apply…the colors to the table rows that are going to be striped and I've also got a…class called highlight.…The highlight class will be applied when the user hovers the mouse over a table row.…
So, let's go back up to script here.…So I've registered an event handler for the dom:loaded event.…What we need to do is get all the table rows and then add classes to them to…
- Retrieving and manipulating web page elements
- Handling web page events and creating custom events
- Traversing the DOM
- Creating and handling AJAX requests
- Using script.aculo.us controls such as Autocompleters, Sliders, and Visual Effects
- Building complex page features like data filtering and image rotators
Skill Level Beginner
1. Overview of Prototype
Introducing Prototype4m 59s
2. Retrieving Page Content
4. Working with Collections
5. Using Prototype's DOM Features
6. Working with Events
7. Prototype and AJAX
8. script.aculo.us and Prototype UI
9. Putting It All Together
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.