随身笔记
随身笔记

jquery table表格隔行换色效果

[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样式的书写顺序有很大的关系,被覆盖的颜色往往要写到最前面,这里对于新手要注意。

随身笔记

jquery table表格隔行换色效果
[code]<style> .d3{background:#ccc; /*隔行换色*/} .ni{background:red;} /*被选择的*/ .d2{background:#e8b; /*鼠标经过的显示的颜色*/} </style> <script type="t…
扫描二维码继续阅读
2013-10-10