How can I highlight a table row using Prototype?

javascript ajax prototypejs
Jason Navarrete picture Jason Navarrete · Sep 9, 2008 · Viewed 10.5k times · Source

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

swilliams picture swilliams · Sep 9, 2008 
<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>

Related questions

How to return AJAX response Text?

I use prototype to do my AJAX development, and I use the code like this: somefunction: function(){ var result = ""; myAjax = new Ajax.Request(postUrl, { method: 'post', postBody: postData, contentType: 'application/x-www-form-urlencoded', onComplete: function(transport){ if (200 == transport.status) { result = transport.responseText; } } }); …

Read More
Ajax GET requests: use parameters or put data in URL?

What's the advantage of passing data as parameters vs part of the URL in an Ajax GET request? Using parameters: var ajax = new Ajax.Request('server.php',{ parameters: 'store=11200&product=Meat', onSuccess: function(myData){whatever} }); Using URL: var ajax = …

Read More
submit a form via Ajax using prototype and update a result div

I'm wondering how can I submit a form via Ajax (using prototype framework) and display the server response in a "result" div. The html looks like this : <form id="myForm" action="/getResults"> [...] <input type="submit" value="submit" /&…

Read More