Prototype 表格hover,click例子

728x15 ad here

出自Guoshuang Wiki

跳转到: 导航, 搜索
<style type="text/css">
.odd {background: green;}
tr.over {background: #bcd4ec;}
tr.clicked td {background:red;}
</style>
<script src="prototype.js"></script>
<script>
var oldClicked = null;

Event.observe(window, 'load', function() {

$$('#test tr').each( function(e,i) {

if ( i % 2 == 1 )Element.addClassName( e, "odd" );

Event.observe(e, 'mouseover', function() {
Element.addClassName(e, 'over');
});

Event.observe(e, 'mouseout', function() {
Element.removeClassName(e, 'over');
});

Event.observe(e,'click',function(){

Element.addClassName(e,"clicked");

if(oldClicked){Element.removeClassName(oldClicked,"clicked");}
oldClicked = e;


})

});

});

</script>


<table id="test" width="300">
<tr>
<td>12312312</td>
</tr>
<tr>
<td>12312312</td>
</tr>
<tr>
<td>12312312</td>
</tr>
<tr>
<td>12312312</td>
</tr>
</table>
个人工具
125x125 ad here
Advertisement
120x600 ad here