向大牛请教一个JS的问题,即点击隔行变色,再点击时还原

2025-02-23 13:09:27
推荐回答(3个)
回答1:



    
        window.onload=function(){
        var oTab = document.getElementById('tb');
        var oTbd = oTab.getElementsByTagName('tbody')[0];
        var oTr = oTbd.getElementsByTagName('tr');    
        var oBtn = document.getElementsByTagName('input')[0];
        var flag = false;//定义一个全局变量来判断
        oBtn.onclick=function(){
            if (!flag) {
                var color = '#CCC';
                flag = true;
            } else {
                var color = '#FFF';
                flag = false;
            }
            for(var i=0;i                if(i%2==0){
                    oTr[i].style.backgroundColor = color;
                }
            }
        }    
    }
    


    
    
        
            第1行第1行
            第2行第2行
            第3行第3行
            第4行第4行
            第5行第5行
            第6行第6行
        
    

回答2:

用jquery的方法

$("#tb tbody tr").toggle(
    function(){
    $(this).css("background-color","#CCC");
    },function(){
    $(this).css("background-color","#00F");
    });

回答3:

var index = 1;
function click()
{
if(index == 1)
{
$("tr:even").css("background-color","#CCC");
$("tr:odd").css("background-color","#00F");
index = 0;
}
else if(index == 0)
{
$("tr:even").css("background-color","#FFF");
$("tr:odd").css("background-color","#C00");
index = 1;
}
}