现在的位置: 首页 -> 前端学习 -> JS前端 -> jquery表格隔行变色且鼠标经过时变色的效果

jquery表格隔行变色且鼠标经过时变色的效果

2014-06-24 00:12 ⁄ 评论数 0 ⁄ 被浏览 7186 views+

用jquery实现表格隔行变色，且鼠标划过该行的时候也有变色的效果，用9行js(jquery)代码就可以实现，使用方便，兼容性也很好。

jquery表格隔行变色

源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jquery表格隔行变色且鼠标经过时变色-代潇瑞博客</title>

<style>

#dxrTab{ border:1px solid #fff; border-collapse:collapse; border-spacing:0;}

#dxrTab td,th{ border:1px solid #fff; width:80px; height:26px; text-align:center;}

#dxrTab th{ background-color:#999; color:#fff;}

.tdbgcolor{background-color:#666;color:#fff;}

</style>

</head>

<body>

window.onload = function(){

$("#dxrTab tr:even").css("background","#ddd");

$("#dxrTab tr:odd").css("background","#eee");

$("#dxrTab tr").hover(function(){

$(this).children('td').addClass("tdbgcolor");

},function(){

$(this).children('td').removeClass("tdbgcolor");

});

}

</script>

<tr><td>李四</td><td>php学习</td><td>1班</td><td>10010101</td><td>女</td></tr>

</table>

</body>

</html>