完整源码可以从我的下载资源里找到.
执行效果:
代码只贴js部分:
(需要jquery Ver1.4 以上支持)
- <script type="text/javascript">
- var row1Color = "#66CC99";
- var row2Color = "#FFCC99";
- var selRowColor = "#999999";
- /**
- *初始化选中行颜色
- */
- function doInitRowColor(){
- $("span").each(function(i){
- setRowColor($(this),i);
- });
- }
- /**
- *设置被选中行颜色
- */
- function selectRow(row){
- $(row).children().attr("bgcolor", selRowColor);
- }
- /**
- *设置当前行颜色
- */
- function setRowColor(row,i){
- if(i%2==0){
- $(row).children().attr("bgcolor", row1Color);
- }else{
- $(row).children().attr("bgcolor", row2Color);
- }
- }
- /**
- * 选中一行事件
- */
- function doSelectRow(row){
- $("span").each(function(i){
- if( $(row).attr("id") == $(this).attr("id") ){ //row.id==$(this).attr("id")
- selectRow($(this) );
- $("#msg").html($(row).attr("id"));
- }else{
- setRowColor($(this),i);
- }
- });
- }
- //当DOM载入就绪可以查询及操纵时绑定
- $(document).ready(function(){
- doInitRowColor();
- doSelectRow($("span").first() );
- });
- </script>