Question

How can I use the Prototype library and create unobtrusive javascript to inject the onmouseover and onmouseout events to each row, rather than putting the javascript in each table row tag?

An answer utilizing the Prototype library (instead of mootools, jQuery, etc) would be most helpful.

Answer 1

<table id='mytable'>     <tbody>         <tr><td>Foo</td><td>Bar</td></tr>         <tr><td>Bork</td><td>Bork</td></tr>      </tbody> </table>  <script type='text/javascript'>  $$('#mytable tr').each(function(item) {     item.observe('mouseover', function() {         item.setStyle({ backgroundColor: '#ddd' });     });     item.observe('mouseout', function() {         item.setStyle({backgroundColor: '#fff' });     }); }); </script>