jquery 選中某一行

完整源碼可以從我的下載資源裏找到.

 

 

執行效果:

 

 

 

代碼只貼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>