[jQuery] Re: paint columns in alternating colour

[kevind]

i added it thus:
============================================
$(document).ready(function(){
$(".Grid .Row:even td").each().addClass("colouredtd");
});

style on page=
.colouredtd {background:silver;}
============================================
Did you mean to leave a space between .Grid and .Row ?  I'm new to the
JQuery syntax - does anyone have a page that breaks down how to select
different elements and their child (if that's the right term) elements
- the Selectors section of the JQuery documentation online tends to
deal with divs first.

kd

On Jan 28, 12:05 pm, Liam Potter <radioactiv...@gmail.com> wrote:
> if you have to have the background color on the td use this
>
> $(document).ready(function(){
> $(".Grid .Row:even td").each().css("background","silver");
>
> });
>
> if you can put the background color on the tr instead and leave the td 
> transparent it's just this
>
> $(document).ready(function(){
> $(".Grid .Row:even").css("background","silver");
>
> });
>
> I'd change .css("background","silver"); to .addClass("classname"); though.
>
> kevind wrote:
> > i have this table structure - a database feeds rows into it with
> > Class=Row or AltRow
> > I want to paint the columns in alternating colours for both Row and
> > AltRow for readability
>
> > I tried:
> > $(document).ready(function(){
> > $(".Grid>.Row>td:even").css("background","silver");
> > });
>
> > and other variations - i'm having difficulty selecting the TD's in the
> > TR of Class 'Row' which is in the table of class 'Grid' - at one point
> > i got a checkerboard effect  :)   I can give the table an ID if that's
> > better to pick things out
>
> > Any help appreciated
> > =============================================================
>
> >  <table class="Grid" cellspacing="0" cellpadding="0">
> >         <caption class="Row">Total Records:&nbsp;5&nbsp;</caption>
> >          <tr class="Caption">
> >           <th></th>
> >           <th></th>
> >           <th></th>
> >           <th></th>
> >           <th></th>
> >           <th>Manager</th>
> >           <th>Status</th>
> >          </tr>
> >          <tr class="GroupCaption">
> >           <th style="TEXT-ALIGN: right">&nbsp; </th>
> >            <th style="TEXT-ALIGN: right">&nbsp; </th>
> >            <th style="TEXT-ALIGN: right">&nbsp; </th>
> >            <th style="TEXT-ALIGN: right">&nbsp; </th>
> >            <th style="TEXT-ALIGN: right">&nbsp; </th>
> >            <th style="TEXT-ALIGN: right">&nbsp; </th>
> >            <th style="TEXT-ALIGN: right">&nbsp; </th>
> >          </tr>
> >          <tr class="Row">
> >           <td style="TEXT-ALIGN: right">&nbsp; </td>
> >           <td style="TEXT-ALIGN: right">150 </td>
> >           <td>ExamOne Hamilton </td>
> >           <td>printer </td>
> >           <td>&nbsp; </td>
> >           <td>Laura Felker </td>
> >           <td>Un-Assigned </td>
> >         </tr>
> >          <tr class="Row">
> >           <td style="TEXT-ALIGN: right">&nbsp; </td>
> >           <td style="TEXT-ALIGN: right">150 </td>
> >           <td>&nbsp;  </td>
> >           <td>monitors </td>
> >           <td>&nbsp; </td>
> >           <td>&nbsp;  </td>
> >           <td>Un-Assigned </td>
> >         </tr>
> >   <tr class="Footer">
> >           <td colspan="7">
> >    <!-- ..nav buttons appear here -->
> >  </tr>
> > </table>