0

I'm not sure how to do this or if its possible with CSS/HTML. I have tables that hold info on my index page that is entered from the members area. The table has a plain white background, which isn't my problem. I'd like it if when new info is entered it changes between two colors. White and Grey... I want the tables to switch between two colors every time new info is entered. I cant explain this very well. Heres an example -

blah blah blah info is here - White background
blah blah blah new info here - Grey background
blah blah blah newer is here - White background
blah blah blah newest info here - Grey background

The example I'm getting at can be seen here, scroll down the page until you see "The 30 Latest Featured Projects"

Thanks in advance!

3
Contributors
4
Replies
5
Views
7 Years
Discussion Span
Last Post by Lsmjudoka
0

See this example.

Its funny you showed me that link... I just found it a little while ago. I had no idea it was called - jQuery Advanced Striping. Now I have to figure out how to code this in to my current code. Thanks!

0

I cant seem to get this code to work with my table code below -

<script src="jquery.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
   $(".stripeMe tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");});
   $(".stripeMe tr:even").addClass("alt");
 });
</script>

Table Code

<table width="780" cellpadding="0" cellspacing="0" border="0">
        <tr style="background-image: url(templates/{TPL_NAME}/images/tr-background.jpg); background-repeat: repeat-x;" align="center" class="table_titles">
          <td width="40%" align="left" height="18" style="padding-left:5px;">{TEMP}</td>
          <td width="6%">{LANG}</td>
          <td width="30%" align="left" style="padding-left:5px;">{TEMP}</td>
          <td width="12%">{LANG}</td>
          <td width="12%">{LANG}</td>
        </tr>
  {LOOP: FEAT_TEMP}
  <tr align="center" class="table_titles">
    <td align="left" style="padding-left:5px;"><a href="{TEMP}">{TEMP}</a></td>
    <td>{TEMP.temp}</td>
    <td align="left" style="padding-left:5px;">{TEMP}</td>
    <td>{TEMP}</td>
    <td>{TEMP}</td>
  </tr>
  <tr>
    <Td colspan="5" background="templates/{TPL_NAME}/images/hline_dot.gif"><img src="templates/{TPL_NAME}/images/dot.gif" width="1" height="1" alt="" border="0"></TD>
  </tr>
  {/LOOP: FEAT.temp}
  <tr>
    <td colspan="5"><a href="temp.php?filter=featured"><img src="templates/{TPL_NAME}/images/button_viewall.gif" width="76" height="16" alt="" border="0" hspace="0" vspace="10"></a></td>
  </tr>
      </table>

Here's the CSS

tr.alt td {
background: #ecf6fc;
}

tr.over td {
background: #bcd4ec;
}

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.