jquery鼠标移入变色移出恢复

一、需求说明

现需要对一个表格的内容部分做下高亮处理：当鼠标放到这一行时，背景色发生改变；当鼠标移出这一行时，恢复这一行的原有背景色。如下图，原来是除了首行以外，带序号的内容部分，奇偶行背景色交替变化，当鼠标放到第1行时，看到下图的样式，移出该行后，恢复原样。

二、代码实现

table及样式部分：

<style type="text/css">
	#studentTable th,td{
		border: 1px solid black;
	}
	#studentTable tbody tr:nth-child(odd) {
		background-color:#F2F2F2;
	}
</style>
<table id="studentTable" style="border-collapse: collapse;">
	<thead>
		<tr>
			<th>序号</th>
			<th>姓名</th>
			<th>年龄</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>10</td>
		</tr>
		<tr>
			<td>2</td>
			<td>李四</td>
			<td>20</td>
		</tr>
		<tr>
			<td>3</td>
			<td>王五</td>
			<td>30</td>
		</tr>
		<tr>
			<td>4</td>
			<td>赵六</td>
			<td>40</td>
		</tr>
		<tr>
			<td>5</td>
			<td>钱七</td>
			<td>50</td>
		</tr>
	</tbody>
</table>

关键点：1.给table添加边框 2.奇偶行颜色交替

js代码部分：

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.js"></script>
<script>
	$(function () {
        var oldColor = "";
        $("#studentTable tbody tr").mouseover(function () {
            oldColor = $(this).css("background-color");
	    $(this).css("background-color","#d9e8fb");
        }).mouseout(function () {
            $(this).css("background-color",oldColor);
        });
    });
</script>

关键点：

弄清实现思路：移入时需要a.获取该行原有背景色 b.给该行添加新的背景色；移出时，恢复改行原有背景色

 

参考：

https://blog.csdn.net/zhoumengkang/article/details/8458196

https://blog.csdn.net/Xuan6251237011/article/details/37942103