javascript实现隔行变色 

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


    
    <dl id="mylist">
        <dd>哈哈哈哈哈哈哈哈哈</dd>
        <dd>哈哈哈哈哈哈哈哈哈</dd>
        <dd>哈哈哈哈哈哈哈哈哈</dd>
        <dd>哈哈哈哈哈哈哈哈哈</dd>
        <dd>哈哈哈哈哈哈哈哈哈</dd>
        <dd>哈哈哈哈哈哈哈哈哈</dd>
        <dd>哈哈哈哈哈哈哈哈哈</dd>
        <dd>哈哈哈哈哈哈哈哈哈</dd>
        <dd>哈哈哈哈哈哈哈哈哈</dd>
        <dd>哈哈哈哈哈哈哈哈哈</dd>
        <dd>哈哈哈哈哈哈哈哈哈</dd>
        <dd>哈哈哈哈哈哈哈哈哈</dd>
        <dd>哈哈哈哈哈哈哈哈哈</dd>
        <dd>哈哈哈哈哈哈哈哈哈</dd>
    </dl>


<script type="text/javascript">
window.onload = function ()
{
    var items = document.getElementById("mylist");
    var items_tr = items.getElementsByTagName("dd");
    for (var i=0; i<items_tr.length; i++)
    {
        if(i%2 == 1)
        {
            items_tr[i].style.backgroundColor="#3cf";
        }
    }
}
</script>
</body>
</html>

 

PS：


1、i%2 == 1 偶数行背景色为蓝色； 0%2=0；1%2=1；2%2=0；3%2=1 ..... 


2、items_tr[i].style.backgroundColor="#3cf"; 


要是想调用css样式的话可以 items_tr[i].className="odd"; 
<style> 
.odd {backgruond:#ddd;}
</style>


 


 


 




//鼠标经过时高亮
function highlightRows() {
    var rows = document.getElementsByTagName("tr");
    for(var i=0; i<rows.length; i++) {
        rows[i].oldClassName = rows[i].className; //首先保存之前的class值
        rows[i].onmouseover = function() {
            addClass(this, "highlight"); //鼠标经过时添加class为highlight的值
        }
        rows[i].onmouseout = function() {
            this.className = this.oldClassName; //鼠标离开时还原之前的class值
        }
    }
}





　　


 


 




<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>	
	<style type="text/css">
		.hover { background:#eee; }
	</style>
</head>
<body>
	<table id="list">
		<tr><td>隔行换色隔行换色隔行换色</td></tr>
		<tr><td>隔行换色隔行换色隔行换色</td></tr>
		<tr><td>隔行换色隔行换色隔行换色</td></tr>
		<tr><td>隔行换色隔行换色隔行换色</td></tr>
		<tr><td>隔行换色隔行换色隔行换色</td></tr>
		<tr><td>隔行换色隔行换色隔行换色</td></tr>
		<tr><td>隔行换色隔行换色隔行换色</td></tr>
		<tr><td>隔行换色隔行换色隔行换色</td></tr>
		<tr><td>隔行换色隔行换色隔行换色</td></tr>
	</table>


<script type="text/javascript">
function mylist()
{
	var items = document.getElementById("list").getElementsByTagName("tr");
	for(var i=0; i<items.length; i++)
	{
		if(i%2 == 1)
		{
			items[i].style.backgroundColor="#3cf";
		}
	}
}

function myhover()
{
	var item = document.getElementById("list").getElementsByTagName("tr");
	for(var i=0; i<item.length; i++)
	{
		item[i].onmouseover = function()
		{
			this.setAttribute("class", "hover"); 
		}

		item[i].onmouseout = function()
		{
			this.setAttribute("class", "");
		}
	}
}

window.onload = function ()
{
	mylist();
	myhover();
}
</script>

</body>
</html>





　　


 


 


 




<!DOCTYPE HTML>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title> 
</head>
<body>
 <table id="list">
 <tr><td>隔行换色隔行换色隔行换色</td></tr>
 <tr><td>隔行换色隔行换色隔行换色</td></tr>
 <tr><td>隔行换色隔行换色隔行换色</td></tr>
 <tr><td>隔行换色隔行换色隔行换色</td></tr>
 <tr><td>隔行换色隔行换色隔行换色</td></tr>
 <tr><td>隔行换色隔行换色隔行换色</td></tr>
 <tr><td>隔行换色隔行换色隔行换色</td></tr>
 <tr><td>隔行换色隔行换色隔行换色</td></tr>
 <tr><td>隔行换色隔行换色隔行换色</td></tr>
 </table>



<script type="text/javascript">
function show(){
var tab=document.getElementById("list");
var tr=tab.getElementsByTagName("tr"); 
for(var i=0;i<=tr.length;i++){
 if(i%2==0){
 tr[i].style.backgroundColor="#ccc";
 tr[i].onmouseover=function(){this.style.background="red"};
 tr[i].onmouseout=function(){this.style.background="#ccc"}
 }else{
 tr[i].style.backgroundColor="#fff";
 tr[i].onmouseover=function(){this.style.background="red"};
 tr[i].onmouseout=function(){this.style.background="#fff"}
 }
}
}



window.onload = function ()
{
 show();
}
</script>


</body>
</html>


 





 


 


 




<script>
function bgChange(){
    var uls = document.getElementById('tableCase').getElementsByTagName('ul');
    for(var i=0;i<uls.length;i+=2){
        uls[i].className = 'bg';
         }

    var oldStyle;
    for(var i=0;i<uls.length;i++){
        uls[i].onmouseover = function(){
        oldStyle = this.className;
        this.className = 'bg_hover';
        }
        uls[i].onmouseout = function(){
        this.className = oldStyle;
        }
         }
}
window.onload = bgChange;
</script>








            

            
posted @ 
2012-04-02 23:04 
赵小磊 
阅读(382) 
评论(0) 
 
收藏 
举报


        

        
        




    
    

    
    

    

        

    

        

            
                
                
            
        

    

    

    

    



    



            

        


        
        

    

    

    




    

        回到头部