如何使用Prototype突出显示表格行？

Question

我如何使用Prototype库并创建不显眼的javascript来将onmouseover和onmouseout事件注入每一行,而不是将javascript放在每个表行标记中？

使用Prototype库(而不是mootools,jQuery等)的答案将是最有帮助的.

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>

Answer 2

您可以使用Prototype addClassName和removeClassName方法.

创建一个CSS类"hilight",你将应用于高亮度<tr>的.然后在页面加载上运行此代码:

var rows = $$('tbody tr');  
for (var i = 0; i < rows.length; i++) {  
    rows[i].onmouseover = function() { $(this).addClassName('hilight'); }  
    rows[i].onmouseout = function() { $(this).removeClassName('hilight'); }  
}