JQuery实现隔行变色和突出显示当前行 效果
运行效果如下图：
jquery关键代码：
<script type="text/javascript"> //该文件为：js.js
// 当鼠标移到表格上是，当前一行背景变色
$(document).ready(function(){
var odd_color="#ddd";//奇数行 颜色
var even_color="#fff";//偶数行 颜色
var hover_color="#d5f4fe"; //鼠标悬浮所在行的颜色
$(".data_list tr:odd td").css("background-color",odd_color); //改变奇数行背景色
$(".data_list tr:odd").attr("bg",odd_color); // 把背景色保存到属性中
$(".data_list tr:even").attr("bg",even_color);
$(".data_list tr td").mouseover(function(){ // 当鼠标移到表格上，当前一行背景变色
$(this).parent().find("td").css("background-color",hover_color);
}).mouseout(function(){ // 离开的该行恢复该行原有背景颜色
var bgc = $(this).parent().attr("bg");
$(this).parent().find("td").css("background-color",bgc);
});
});
</script>
html关键代码
<html>
<head>
<meta charset="UTF-8"/>
<title>JQuery实现隔行变色和突出显示当前行 效果</title>
<script type="text/javascript" src='jquery.js'></script>
<script type="text/javascript" src='js.js'></script> <!--加载jq部分处理代码-->
</head>
<body>
<div>
<table border="1" cellspacing="0" cellpadding="0" class="data_list">
<tr><th>用户姓名</th><th>用户性别</th><th>用户电话</th><th>用户邮箱</th><th>预计购置时间</th></th></tr>
<tr><td>name1</td><td>男</td><td>13900139000</td><td>test@hioop.net</td><td>2014-12-02</td></tr>
<tr><td>name2</td><td>男</td><td>13900139000</td><td>test@hioop.net</td><td>2014-12-02</td></tr>
<tr><td>name3</td><td>男</td><td>13900139000</td><td>test@hioop.net</td><td>2014-12-02</td></tr>
<tr><td>name6</td><td>男</td><td>13900139000</td><td>test@hioop.net</td><td>2014-12-02</td></tr>
<tr><td>name4</td><td>男</td><td>13900139000</td><td>test@hioop.net</td><td>2014-12-02</td></tr>
<tr><td>name5</td><td>男</td><td>13900139000</td><td>test@hioop.net</td><td>2014-12-02</td></tr>
</table>
</div>
</body>
</html>
转载请注明出处，谢谢！
