phpeveryday.com

The best tutorial of php, php framework, php strategies, object oriented oriented,


jQuery - Selector: Modify Style for Table Header

Tag: jQuery, $(), factory, function, selectors, custom selectors, table, style   Category: JavaScript
post: 21 Mar 2008 read: 756


jQuery Selector Step By Step Tutorial - Part 7: We can give special style for table header. For this job, you can use like this:

Change <td> for header become <th>.


<table>
  <tr>
    <th>Title</th>
    <th>Singer</th>    
  </tr>
  <tr>
    <td>Yesterday</td>
    <td>Beatles</td>    
  </tr>  
  <tr>
    <td>Kiss Me Quick</td>
    <td>Elvis</td>    
  </tr>  
  <tr>
    <td>Ben</td>
    <td>Michael Jackson</td>    
  </tr>  
  <tr>
    <td>Hei, Jude!</td>
    <td>Beatles</td>    
  </tr>  
</table>

Next, add class for table header at css, like this:


.table-header{
  background-color:#FFFF00;
  font-weight:bold;
}

Last, modify js become like this:


$(document).ready(function(){
  $('th').parent().addClass('table-header');
  $('tr:not([th]):odd').addClass('odd');	
  $('tr:not([th]):even').addClass('even');
  
  $('td:contains("Jude")').addClass('top40');
});


Series this article:
jQuery - Selectors: Understanding The $() Factory Function
jQuery - Selector: Modifying Style at List Item Levels
jQuery - Selector: Styling Sub Level Item
jQuery - Selector: XPath Selectors
jQuery - Selector: Custom Selectors
jQuery - Selector: Choose a Style at Custom Selectors
jQuery - Selector: Modify Style for Table Header
jQuery - Selector: Styling Sibling
jQuery - Selector: Styling Next Cell

| Give Your Opinion | Recommend
Share and Bookmark to: These icons link to social bookmarking sites where readers can share and discover new web pages.
digg del.icio.us technorati Ma.gnolia BlinkList

Recommended articles by other readers:
Web Services: How PHP Kiss VB.NET? (Part 1)
Chart: How to Build Cool Animation Real Time Chart
Joomla: Fast Road to Understand Component Programming
Email: Send Attachement Mail
SMS : Sending SMS with PHP and ActiveXperts (Part 1)

What do You Think?
Your Name *:
Email *:
(Will not be published)
Website/URL:
Your Comment *:
* Required


624
posting