您的位置:首页 > Web前端 > JQuery

基于jquery的html 选中一行

2012-05-23 11:21 190 查看
完整源码可以从我的下载资源里找到.

执行效果:



代码只贴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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: