JSJQ-隔行变色

！！！- CSS

　　*{margin:0;padding:0;}
　　table{border-collapse: collapse;}
　　th,td{border:1px solid #ccc;padding:5px 25px; }

！！！ - HTML

<table id="tab">
　　<thead>
　　　　<th>序号</th>
　　　　<th>姓名</th>
　　　　<th>年龄</th>
　　　　<th>操作</th>
　　</thead>
　　<tbody>
　　　　<tr>
　　　　　　<td>01</td>
　　　　　　<td>隔行变色</td>
　　　　　　<td>21</td>
　　　　　　<td><a href="#">删除</a></td>
　　　　</tr>
　　　　<tr>
　　　　　　<td>01</td>
　　　　　　<td>隔行变色</td>
　　　　　　<td>21</td>
　　　　　　<td><a href="#">删除</a></td>
　　　　</tr>
　　　　<tr>
　　　　　　<td>01</td>
　　　　　　<td>隔行变色</td>
　　　　　　<td>21</td>
　　　　　　<td><a href="#">删除</a></td>
　　　　</tr>
　　　　<tr>
　　　　　　<td>01</td>
　　　　　　<td>隔行变色</td>
　　　　　　<td>21</td>
　　　　　　<td><a href="#">删除</a></td>
　　　　</tr>
　　</tbody>
</table>

！！！ - JavaScript

　　window.onload=function()
　　{
　　　　var tab=document.getElementById('tab');
　　　　//隔行变色
　　　　for(var i=0;i<tab.tBodies[0].rows.length;i++){
　　　　　　if(i%2==0){
　　　　　　　　tab.tBodies[0].rows[i].style.background='yellow';
　　　　　　}else{
　　　　　　　　tab.tBodies[0].rows[i].style.background='';
　　　　　　}
　　　　}
　　}

加深效果，鼠标移动到一条信息上，要显示绿色，鼠标移开的时候，颜色要变回去

代码如下：　　

　　window.onload=function()
　　{
　　　　var tab=document.getElementById('tab');
　　　　//隔行变色
　　　　for(var i=0;i<tab.tBodies[0].rows.length;i++)
　　　　{
　　　　　　tab.tBodies[0].rows[i].onmouseover=function()
　　　　　　{
　　　　　　　　this.style.background='green';
　　　　　　}
　　　　　　tab.tBodies[0].rows[i].onmouseleave=function()
　　　　　　{
　　　　　　　　this.style.background='';
　　　　　　}
　　　　　　if(i%2==0)
　　　　　　{
　　　　　　　　tab.tBodies[0].rows[i].style.background='yellow';
　　　　　　}
　　　　　　else
　　　　　　{
　　　　　　　　tab.tBodies[0].rows[i].style.background='';
　　　　　　}
　　　　}
　　}

效果如图：

　　

会发现，鼠标移开的时候，之前的颜色都为空了！！！

这个原因在于this.style.background='';你看，这条语句就是凶手

解决思路：先将颜色赋值给变量，离开的时候，在赋值给background

代码：

//mouseout:不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
//mouseleave: 只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
　　window.onload=function()
　　{
　　　　var tab=document.getElementById('tab');
　　　　var bgColor='';                                               //初始化变量
　　　　//隔行变色
　　　　for(var i=0;i<tab.tBodies[0].rows.length;i++)
　　　　{
　　　　　　tab.tBodies[0].rows[i].onmouseover=function()
　　　　　　{
　　　　　　　　bgColor=this.style.background;　　　　　　//将颜色赋值给变量
　　　　　　　　this.style.background='green';
　　　　　　}
　　　　　　tab.tBodies[0].rows[i].onmouseout=function()
　　　　　　{
　　　　　　　　this.style.background=bgColor;　　　　　　//离开的时候，还是变量里存储的颜色
　　　　　　}
　　　　　　if(i%2==0)
　　　　　　{
　　　　　　　　tab.tBodies[0].rows[i].style.background='yellow';
　　　　　　}
　　　　　　else
　　　　　　{
　　　　　　　　tab.tBodies[0].rows[i].style.background='';
　　　　　　}
　　　　}
　　}

！！！ - JQuery

　　//隔行变色

　　//filter()：过滤选择器，将匹配元素集合缩减为匹配指定选择器的元素。也就是放一些可以筛选的东西

　　//：even   奇数   冒号开头的，我们叫“伪类”

　　$(function(){
　　　　$('#tab tbody tr').filter(':even').css('background','yellow');
　　})

　　想要鼠标移入，颜色变绿色，移除变回之前的模样

　　代码如下：

　　方法一：

　　　　$(function(){
　　　　　　var bgColor='';
　　　　　　$('#tab tbody tr').filter(':even').css('background','yellow');
　　　　　　$('#tab tbody tr').hover(function(){
　　　　　　　　bgColor=$(this).css('background');
　　　　　　　　$(this).css('background','green');
　　　　　　},function(){
　　　　　　　　$(this).css('background',bgColor);
　　　　　　})
　　　　})

　　方法二、

　　　　$(function(){
　　　　　　var bgColor='';
　　　　　　$('#tab tbody tr').filter(':even').css('background','yellow');
　　　　　　$('#tab tbody tr').mouseover(function(){
　　　　　　　　bgColor=$(this).css('background');
　　　　　　　　$(this).css('background','green');
　　　　　　})
　　　　　　$('#tab tbody tr').mouseout(function(){
　　　　　　　　$(this).css('background',bgColor);
　　　　　　})
　　　　})