Member Avatar

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>

Heres css for table colors-

tr.alt td {
background: #ecf6fc;
}

tr.over td {
background: #bcd4ec;
}

Any ideas on this?

Recommended Answers

Have you applied the ".stripeMe" class in your html? The jQuery code is looking for "tr"s specifically within elements of that class--if it doesn't find any, it won't find your trs.

Jump to Post

Glad to hear you got it sorted! :-)

Jump to Post

I haven't tried this, but I'm thinking you can use .children to look inside your trs and target the tds. Something like:

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

Even more simple might be to cut out the additional function and just target the tds …

Jump to Post

All 11 Replies

Member Avatar

This is the site I found the jQuery code @. I got a () error code in IE. I might be placing the code in the wrong place. Not real sure?

Have you applied the ".stripeMe" class in your html? The jQuery code is looking for "tr"s specifically within elements of that class--if it doesn't find any, it won't find your trs.

Member Avatar

Yeah I figured out adding this to the table makes it work, but it starts from the header.

<table class="stripeMe" 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>

Glad to hear you got it sorted! :-)

Member Avatar

I still have a problem with the stripes starting from my header. If you notice I have a repeating background for the tr.

I want to skip that and start at the td

I haven't tried this, but I'm thinking you can use .children to look inside your trs and target the tds. Something like:

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

Even more simple might be to cut out the additional function and just target the tds explicitly?

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

Again, I didn't try this, but it's the direction I go :-)

Member Avatar

children? jQuery isn't my thing... I see what you have done, but I dont know what to do with it.

by adding .children(), you direct the target of the .mouseover that follows to the children (and only the immediate children, not grandchildren or deeper) of the element(s) you had targeted thus far. In this way you add the "over" class to tds instead of trs on mouseover.

As I wrote that, it occurred to me that you could simply target the tds at the onset though, by adding "td" to the end of the selector statement (.stripeMe tr td). That, too, would jump to the tds and add the class to them, rather than adding the class to the parent trs.

Member Avatar

I've tried both... All its doing is highlighting the first line. The alt function isn't working either. The only thing thats working for some reason is the original code I posted, but it still highlights the tr, which is what I dont want.

I'm not a superstar at jQuery either, but may I recommend this link. If I recall, Chris goes over some table, css, and jQuery stuff in this screencast, and even highlighting rows. Like all of his screencasts, it's a really great watch!

Member Avatar

I'm not a superstar at jQuery either, but may I recommend this link. If I recall, Chris goes over some table, css, and jQuery stuff in this screencast, and even highlighting rows. Like all of his screencasts, it's a really great watch!

Yeah I'll check that site out. I need to learn jQuery anyway... But I fixed my problem. I split my table up into 3 different tables, now it works. This may not have been the best way to go about things but it works. I checked FF, IE7, Chrome...Seems to work in all of them just fine. Thanks for giving me idea's eric.felker.

Marking Solved!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.19 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.