finding all tr's within a div

[Phil Petree]

I'm expanding the table row highlighting ya'll helped me with before.  Now I have two tables on a page and each table has rows that I want to highlight on mouseover.

 

Can't give the tables the same id so what I was doing was creating a div with a class:

 

<table class='blah' id='blah' ...>

<tr><th>Col 1</th><th> col 2</th></tr>

<div class='row_highlight'>

<tr><td>Data 1</td><td>Data 2</td</tr>

<tr><td>Data 1</td><td>Data 2</td</tr>

<tr><td>Data 1</td><td>Data 2</td</tr>
</div>

</table>

 

In prototype I'm trying:

  $$('div.row_highlight tr').each(function(item) {
      item.observe('mouseover', function() {
          item.addClassName('over');
      });
      item.observe('mouseout', function() {
          item.removeClassName('over');
      });
  });

$$ is returning null... not even getting to the item.observe

 

Obviously, I'm doing something wrong here... googled around and most people seem to be doing it the way I am...  what am I missing?

 

[Walter Lee Davis]

You can't nest a div inside a table like this. JavaScript (not just Prototype) has no tolerance for malformed HTML. Browsers handle it perfectly (for certain definitions of perfectly) but scripts rely on you getting the HTML right before you start horsing around with the DOM.

The simplest way to do what you're describing here is to make your HTML valid, and add a new set of valid tags that you're not currently using: thead and tbody.

<table class="row_highlight">
<thead>
<tr>
<th>Head one</th><th>Head two</th>
</tr>
</thead>
<tbody>
<tr>
<td>Col one</td><td>Col two</td>
</tr>
... many more rows here ...
</tbody>
</table>

Now, all you need to get the table rows to highlight is this:

$$('.row_highlight tbody tr').each(function(item){
... your code here ...
});

See how that works?

Walter

>
>
> --
> You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to prototype-scripta...@googlegroups.com.
> To post to this group, send email to prototype-s...@googlegroups.com.
> Visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>

[Phil Petree]

Walter, thanks for that... I knew I was approaching it the wrong way...  I never think about tbody cause it didn't exist when I learned html... it's never bcome a part of my habit (along with several other things) LOL