您的位置：首页 > 其它

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

2011-01-03 00:00 507 查看

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航