Your browser (Internet Explorer 7 or lower) is out of date. It has known security flaws and may not display all features of this and other websites. Learn how to update your browser.

X

Navigate / search

Use jQuery To Bring Your Site To Life

If you're not using a Javascript framework, you are writing too much code!  When I first started learning how to write Javascript several years ago, I didn't know these frameworks existed.  A couple a years ago, I learned about jQuery and how to utilize it to speed up my development.

I'm sure you're thinking that first paragraph seems like an ad.  Well, that may be so, but I enjoy every minute I am able to develop code using jQuery.

Example: Alternate Background Colors in a Table

Let's start with a table layout.

  1. <table id="example">
  2. <thead>
  3. <tr>
  4. <th>Column 1</th>
  5. <th>Column 2</th>
  6. <th>Column 3</th>
  7. </tr>
  8. </thead>
  9. <tbody>
  10. <tr>
  11. <td>Data 1</td>
  12. <td>Data 2</td>
  13. <td>Data 3</td>
  14. </tr>
  15. <tr>
  16. <td>Data 4</td>
  17. <td>Data 5</td>
  18. <td>Data 6</td>
  19. </tr>
  20. <tr>
  21. <td>Data 7</td>
  22. <td>Data 8</td>
  23. <td>Data 9</td>
  24. </tr>
  25. </tbody>
  26. </table>

To alternate background colors, the following code can be used.

  1. $('#example tbody tr:odd').css('background-color','#CCCCCC');

In the above code, css selectors are used to get a handle to every other tr in the table tbody section.  Then, the background color is applied to every other table row.  Only one line of Javascript code is needed to accomplish this!

To learn more, visit the jQuery website.

Post comments

Leave a comment