当鼠标点击表格外，表格的背景颜色变成白色

刀的剑 2013-05-24 07:48:55

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
var cur;
window.onload=function(){
var otr=document.getElementsByTagName("tr");
for(var i=1 ;i<otr.length;i++){
otr[i].onclick=function (){

cur?cur.style.background="white":"";
change(this);
cur=this;
}
}
}
function change(obj){
obj.style.background="yellow";
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body><table width="200" border="1" cellspacing="1" cellpadding="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

</body>
</html>

...全文

290 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

刀的剑 2013-05-24

打赏
举报

引用 4 楼 ZXY900213 的回复:

[quote=引用 3 楼 ZXY900213 的回复:] document.onclick = function(e){ e = e || window.event; o = e.srcElement || e.target; while(o.parentNode){ if(o.id == "table1"){ document.getElementById("table1").className=''; return; } o = o.parentNode; } document.getElementById("table1").className='blur'; }

document.onclick = function(e){
    e = e || window.event;
    o = e.srcElement || e.target;
    while(o.parentNode){
        if(o.id == "table1"){
            document.getElementById("table1").className='';
            return;
        }
        o = o.parentNode;
    }
    document.getElementById("table1").className='blur';
}

[/quote]给个全面代码吧改了不行哦

ZXY900213 2013-05-24

打赏
举报

引用 3 楼 ZXY900213 的回复:

document.onclick = function(e){ e = e || window.event; o = e.srcElement || e.target; while(o.parentNode){ if(o.id == "table1"){ document.getElementById("table1").className=''; return; } o = o.parentNode; } document.getElementById("table1").className='blur'; }

document.onclick = function(e){
    e = e || window.event;
    o = e.srcElement || e.target;
    while(o.parentNode){
        if(o.id == "table1"){
            document.getElementById("table1").className='';
            return;
        }
        o = o.parentNode;
    }
    document.getElementById("table1").className='blur';
}

ZXY900213 2013-05-24

打赏
举报

ZXY900213 2013-05-24

打赏
举报

// 给table 加个 id 属性，假设id为table1

.blur tr{ background-color:#FFFFFF;}

document.onclick = function(e){
    e = e || window.event;
    o = e.srcElement || e.target;
    while(o.parentNode){
        if(o.id == "table1") return;
        o = o.parentNode;
    }
    document.getElementById("table1").className='blur';
}

豪情 2013-05-24

打赏
举报

简单就这样吧，也可以添加事件td.onmouseout,


window.onload = function(){
    var oTab = document.getElementById('tab');
    var aTr = oTab.getElementsByTagName('tr');
    var cur = 0;
    
    for(var i = 0; i < aTr.length; i++){
        aTr[i].index = i;
        aTr[i].onclick = function(){
            this.style.background = '#f60';
            cur = this.index;
        }
    }
    document.onclick = function(e){
        e = e || event;
        src = e.srcElement || e.target;
        if(src.tagName.toLowerCase() != 'td'){
            for(i = 0; i < aTr.length; i++){
                aTr[i].style.background = '';
            }
        }
    }
}

表格行随鼠标移入移出，背景色也随之改变，，，