table的tr onmouseover,onmouseout, click 事件代理

最新推荐文章于 2022-07-12 15:15:52 发布

weixin_34228662

最新推荐文章于 2022-07-12 15:15:52 发布

阅读量366

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/jsan/blog/11794

版权

为什么80%的码农都做不了架构师？>>>

<html><head><title>关于表格颜色</title>
<script language="JavaScript" type="text/javascript"> 
var tmpColor=""; 
var clickcolor="#aac6f8"; 
var arrBg=["#ffffff","#d8e9fd"]; //表格交替色
///单击改变行颜色 
function clickto(){source=event.srcElement; 
if (source.tagName=="TR"||source.tagName=="TABLE")return; 
while(source.tagName!="TD")source=source.parentElement;source=source.parentElement; 
var ss=source.parentElement; 
while(ss.tagName!="TABLE"){ 
ss=ss.parentElement;sst=ss.getElementsByTagName("td"); 
for(k=0;k<sst.length;k++){sst[k].style.backgroundColor="";}}cs=source.children; 
if(cs[1].style.backgroundColor!=clickcolor){for(i=0;i<cs.length;i++){cs[i].style.backgroundColor=clickcolor;}} 
else{for(i=0;i<cs.length;i++){cs[i].style.backgroundColor="";}}} 
///单击改变行颜色
///鼠标onmousemove,onmouseout时的颜色 
function fmove(){ 
var e=event.srcElement; 
if(e.tagName=="TD"){e.parentNode.style.backgroundColor="#aac6f8"};}

function fout(){ 
var e=event.srcElement; 
var thisRow; //本行行数 
if(e.tagName=="TD"){thisRow=e.parentElement.rowIndex;} 
tmpColor=thisRow%2==0?arrBg[0]:arrBg[1]; //根据行数定颜色 
if(e.tagName=="TD"){e.parentNode.style.backgroundColor=tmpColor;} 
} 
///鼠标onmousemove,onmouseout时的颜色
///设置表格交替色// 
function setTableBg(){ 
var oTr=t.rows; 
var intLenTr=oTr.length; 
var intLenBg=arrBg.length; 
for(var i=0;i<intLenTr;i++){ 
intMod=i % intLenBg; 
oTr[i].style.backgroundColor=arrBg[intMod]; 
} 
} 
///设置表格交替色//
</script>

</head><body onload=setTableBg()>
<table id="t" onmouseup="clickto()" onmousemove="fmove()" onmouseout="fout()" width="488" height="142" border="1"> 
<tr> 
<td>第一行</td> 
<td>essdgfs>rg</td> 
<td>egweg</td> 
</tr> 
<tr> 
<td>第二行</td> 
<td>wewe</td> 
<td>wayuiyuiyui</td> 
</tr> 
<tr> 
<td>第三行</td> 
<td>ewgwew</td> 
<td>wegwesegeg</td> 
</tr> 
<tr> 
<td>第四行</td> 
<td>esrgferg</td> 
<td>egweg</td> 
</tr> 
<tr> 
<td>第五行</td> 
<td>wewe</td> 
<td>waegwe</td> 
</tr> 
<tr> 
<td>第六行</td> 
<td>ewgwew</td> 
<td>wegwesegeg</td> 
</tr> 
</table>
</body></html>

转载于:https://my.oschina.net/jsan/blog/11794