快捷導(dǎo)航

javascript修改表格背景色實(shí)例代碼分享

更新時(shí)間：2013年12月10日 10:46:40 作者：

這篇文章主要介紹了javascript修改表格背景色實(shí)例，代碼簡(jiǎn)單，大家參考使用吧

<html> 
<script> 
//點(diǎn)擊當(dāng)前選中行的時(shí)候設(shè)置當(dāng)前行的顏色，同時(shí)恢復(fù)除當(dāng)前行外的行的顏色及鼠標(biāo)事件 
function selectRow(target) 
{ 
     var sTable = document.getElementById("ServiceListTable") 
     for(var i=1;i<sTable.rows.length;i++) //遍歷除第一行外的所有行 
     { 
         if (sTable.rows[i] != target) //判斷是否當(dāng)前選定行 
         { 
             sTable.rows[i].bgColor = "#ffffff"; //設(shè)置背景色 
             sTable.rows[i].onmouseover = resumeRowOver; //增加onmouseover 事件 
             sTable.rows[i].onmouseout = resumeRowOut;//增加onmouseout 事件 
         } 
         else 
         { 
             sTable.rows[i].bgColor = "#d3d3d3"; 
             sTable.rows[i].onmouseover = ""; //去除鼠標(biāo)事件 
             sTable.rows[i].onmouseout = ""; //去除鼠標(biāo)事件 
         } 
     } 
} 
//移過時(shí)tr的背景色 
function rowOver(target) 
{ 
    target.bgColor='#e4e4e4'; 
} 
//移出時(shí)tr的背景色 
function rowOut(target) 
{ 
    target.bgColor='#ffffff'; 
} 
//恢復(fù)tr的的onmouseover事件配套調(diào)用函數(shù) 
function resumeRowOver() 
{ 
    rowOver(this); 
} 
//恢復(fù)tr的的onmouseout事件配套調(diào)用函數(shù) 
function resumeRowOut() 
{ 
    rowOut(this); 
}　　 
</script> 
<body> 
<div style="width:50px;height:50px;background-color:Blue" onmouseover="javascript:this.style.backgroundColor='red';" onmouseout="javascript:this.style.backgroundColor='blue'">關(guān)于最后兩個(gè)函數(shù)resumeRowOver和resumeRowOut為什么這樣寫參考我之前寫的通過js給頁(yè)面元素添加事件對(duì)應(yīng)的表格HTMLview plaincopy to clipboardprint? 
</div> 
<table width="100%" border="1" cellspacing="1" cellpadding="0" id="ServiceListTable">  
<tr>  
<th>服務(wù)事項(xiàng)</th>  
<th>N</th>  
<th>狀態(tài)</th>  
<th>辦結(jié)</th>  
<th>資料</th>  
</tr>  
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">  
<td>相關(guān)內(nèi)容</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
</tr>  
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">  
<td>相關(guān)內(nèi)容</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
</tr>  
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">  
<td>相關(guān)內(nèi)容</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
</tr>  
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">  
<td>相關(guān)內(nèi)容</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
</tr>  
</table>  
</body> 
</html>
 