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.
When you create Web pages in HTML, you can use JavaScript functions to alter the appearance of page elements on user interaction. To highlight certain rows in a table, you can set Cascading Style Sheet declarations for these rows in their normal state and in their highlighted state.
To make the full row selectable, you should add the link to the <tr> instead of to individual table cells. Since you're not allowed to place an <a> tag around a table row, you'll have to think a little bit outside the box to solve this puzzle.
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With