Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I highlight a table row using Prototype?

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.

like image 428
Jason Navarrete Avatar asked Sep 09 '08 15:09

Jason Navarrete


People also ask

How do I highlight a row in a table in HTML?

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.

How do I make a row in a table selectable?

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.


1 Answers

<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>
like image 97
swilliams Avatar answered Oct 11 '22 02:10

swilliams