[code]<style>
.d3{background:#ccc; /*隔行换色*/}
.ni{background:red;} /*被选择的*/
.d2{background:#e8b; /*鼠标经过的显示的颜色*/}
</style>
<script type=”text/javascript” src=”js/jQuery v1.6.4.js”></script>
<script>
$(function(){
$(‘tr:odd’).addClass(“d3”);
$(‘tr’).hover(function(){
$(‘tr’).removeClass(‘d2’);
$(this).addClass(‘d2’);
});
$(‘tr’).click(function(){
$(this).toggleClass(‘ni’);
});
// $(“tr”).hover(
// function(){ $(this).addClass(“highlight”); },
// function(){ $(this).removeClass(“highlight”);
// }).click(function(){
// $(this).toggleClass(“selected”);
// });
//
});
</script>[/code]
HTML代码:
[code]<table width=”100%” border=”1″ cellspacing=”0″>
<tr>
<td>1</td> <td>1</td> <td>1</td> <td>1</td>
</tr>
<tr>
<td>1</td> <td>1</td> <td>1</td> <td>1</td>
</tr>
</table>[/code]
以上是我写的代码,这里主要遇到的问题是颜色覆盖问题。这里对CSS样式的书写顺序有很大的关系,被覆盖的颜色往往要写到最前面,这里对于新手要注意。