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);
})
})