<p>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?</p>

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

[{'answer_id': 52250, 'author': 'pix0r', 'author_id': 72, 'author_profile': 'https://Stackoverflow.com/users/72', 'pm_score': 3, 'selected': False, 'text': '<p>You can use Prototype\'s <code>addClassName</code> and <code>removeClassName</code> methods.</p>\n\n<p>Create a CSS class "hilight" that you\'ll apply to the hilighted <code>&lt;tr&gt;</code>\'s.  Then run this code on page load:</p>\n\n<pre><code>var rows = $$(\'tbody tr\');  \nfor (var i = 0; i &lt; rows.length; i++) {  \n    rows[i].onmouseover = function() { $(this).addClassName(\'hilight\'); }  \n    rows[i].onmouseout = function() { $(this).removeClassName(\'hilight\'); }  \n}\n</code></pre>\n'}, {'answer_id': 52253, 'author': 'swilliams', 'author_id': 736, 'author_profile': 'https://Stackoverflow.com/users/736', 'pm_score': 4, 'selected': True, 'text': '<pre><code>&lt;table id="mytable"&gt;\n    &lt;tbody&gt;\n        &lt;tr&gt;&lt;td&gt;Foo&lt;/td&gt;&lt;td&gt;Bar&lt;/td&gt;&lt;/tr&gt;\n        &lt;tr&gt;&lt;td&gt;Bork&lt;/td&gt;&lt;td&gt;Bork&lt;/td&gt;&lt;/tr&gt;\n\n    &lt;/tbody&gt;\n&lt;/table&gt;\n\n&lt;script type="text/javascript"&gt;\n\n$$(\'#mytable tr\').each(function(item) {\n    item.observe(\'mouseover\', function() {\n        item.setStyle({ backgroundColor: \'#ddd\' });\n    });\n    item.observe(\'mouseout\', function() {\n        item.setStyle({backgroundColor: \'#fff\' });\n    });\n});\n&lt;/script&gt;\n</code></pre>\n'}, {'answer_id': 52258, 'author': 'pkaeding', 'author_id': 4257, 'author_profile': 'https://Stackoverflow.com/users/4257', 'pm_score': 1, 'selected': False, 'text': "<p>You can do something to each row, like so:</p>\n\n<pre><code>$('tableId').getElementsBySelector('tr').each(function (row) {\n  ...\n});\n</code></pre>\n\n<p>So, in the body of that function, you have access to each row, one at a time, in the 'row' variable.  You can then call Event.observe(row, ...)</p>\n\n<p>So, something like this might work:</p>\n\n<pre><code>$('tableId').getElementsBySelector('tr').each(function (row) {\n  Event.observe(row, 'mouseover', function () {...do hightlight code...});\n});\n</code></pre>\n"}, {'answer_id': 52273, 'author': 'Mark Biek', 'author_id': 305, 'author_profile': 'https://Stackoverflow.com/users/305', 'pm_score': 2, 'selected': False, 'text': '<p>I made a slight change to <a href="https://stackoverflow.com/questions/52238/how-can-i-highlight-a-table-row-using-prototype#52253">@swilliams</a> code.</p>\n\n<pre><code>$$(\'#thetable tr:not(#headRow)\').each(\n</code></pre>\n\n<p>This lets me have a table with a header row that <strong>doesn\'t</strong> get highlighted.</p>\n\n<pre><code>&lt;tr id="headRow"&gt;\n    &lt;th&gt;Header 1&lt;/th&gt;\n&lt;/tr&gt;\n</code></pre>\n'}, {'answer_id': 143014, 'author': 'Fczbkk', 'author_id': 22920, 'author_profile': 'https://Stackoverflow.com/users/22920', 'pm_score': 2, 'selected': False, 'text': '<p>A little bit generic solution:</p>\n\n<p>Let\'s say I want to have a simple way to make tables with rows that will highlight when I put mouse pointer over them. In ideal world this would be very easy, with just one simple CSS rule:</p>\n\n<pre><code>tr:hover { background: red; }\n</code></pre>\n\n<p>Unfortunately, older versions of IE don\'t support :hover selector on elements other than A. So we have to use JavaScript.</p>\n\n<p>In that case, I will define a table class "highlightable" to mark tables that should have hoverable rows. I will make the background switching by adding and removing the class "highlight" on the table row.</p>\n\n<p><strong>CSS</strong></p>\n\n<pre><code>table.highlightable tr.highlight { background: red; }\n</code></pre>\n\n<p><strong>JavaScript (using Prototype)</strong></p>\n\n<pre><code>// when document loads\ndocument.observe( \'dom:loaded\', function() {\n    // find all rows in highlightable table\n    $$( \'table.highlightable tr\' ).each( function( row ) {\n        // add/remove class "highlight" when mouse enters/leaves\n        row.observe( \'mouseover\', function( evt ) { evt.element().addClassName( \'highlight\' ) } );\n        row.observe( \'mouseout\', function( evt ) { evt.element().removeClassName( \'highlight\' ) } );\n    } );\n} )\n</code></pre>\n\n<p><strong>HTML</strong></p>\n\n<p>All you have to do now is to add class "highlightable" to any table you want:</p>\n\n<pre><code>&lt;table class="highlightable"&gt;\n    ...\n&lt;/table&gt;\n</code></pre>\n'}, {'answer_id': 2371048, 'author': 'Zloi', 'author_id': 285270, 'author_profile': 'https://Stackoverflow.com/users/285270', 'pm_score': 0, 'selected': False, 'text': '<p>I found ab interesting solution for Rows background, the rows highlighting on mouse over, without JS. Here is <a href="http://www.sopov.com/joomla-wordpress-tips-and-tricks/70-how-highlight-table-row-background.html" rel="nofollow noreferrer">link</a></p>\n\n<p>Works in all browsers. For IE6/7/8  ...</p>\n\n<pre><code>tr{ position: relative; }\ntd{ background-image: none } \n</code></pre>\n\n<p>And for Safari I use negative background position for each TD.</p>\n'}]
['https://Stackoverflow.com/questions/52238', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/3920/']