javascript修改表格背景色實例代碼分享
更新時間：2013年12月10日 10:46:40 作者：
這篇文章主要介紹了javascript修改表格背景色實例，代碼簡單，大家參考使用吧
復制代碼 代碼如下:
<html>
<script>
//點擊當前選中行的時候設置當前行的顏色，同時恢復除當前行外的行的顏色及鼠標事件
function selectRow(target)
{
var sTable = document.getElementById("ServiceListTable")
for(var i=1;i<sTable.rows.length;i++) //遍歷除第一行外的所有行
{
if (sTable.rows[i] != target) //判斷是否當前選定行
{
sTable.rows[i].bgColor = "#ffffff"; //設置背景色
sTable.rows[i].onmouseover = resumeRowOver; //增加onmouseover 事件
sTable.rows[i].onmouseout = resumeRowOut;//增加onmouseout 事件
}
else
{
sTable.rows[i].bgColor = "#d3d3d3";
sTable.rows[i].onmouseover = ""; //去除鼠標事件
sTable.rows[i].onmouseout = ""; //去除鼠標事件
}
}
}
//移過時tr的背景色
function rowOver(target)
{
target.bgColor='#e4e4e4';
}
//移出時tr的背景色
function rowOut(target)
{
target.bgColor='#ffffff';
}
//恢復tr的的onmouseover事件配套調用函數
function resumeRowOver()
{
rowOver(this);
}
//恢復tr的的onmouseout事件配套調用函數
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'">關于最后兩個函數resumeRowOver和resumeRowOut為什么這樣寫參考我之前寫的通過js給頁面元素添加事件對應的表格HTMLview plaincopy to clipboardprint?
</div>
<table width="100%" border="1" cellspacing="1" cellpadding="0" id="ServiceListTable">
<tr>
<th>服務事項</th>
<th>N</th>
<th>狀態(tài)</th>
<th>辦結</th>
<th>資料</th>
</tr>
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">
<td>相關內容</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">
<td>相關內容</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">
<td>相關內容</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">
<td>相關內容</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
</table>
</body>
</html>
相關文章
這篇文章主要介紹了理解JavaScript單一職責原則，單一職責原則（SRP：Single?responsibility?principle）又稱單一功能原則，面向對象五個基本原則（SOLID）之一，下文更多相關介紹感興趣的小伙伴可以參考一下2022-08-08
這篇文章主要介紹了微信小程序文件下載視頻和圖片，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
本篇文章主要介紹了webpack中的熱刷新與熱加載的區(qū)別，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了javascript如何判斷輸入的url是否正確,需要的朋友可以參考下2014-04-04
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，下面這篇文章主要給大家介紹了axios學習教程的相關資料，文中介紹的非常詳細，對大家具有一定的參考價值，需要的朋友下面來一起看看吧。2017-03-03
這篇文章主要介紹了JavaScript中的執(zhí)行上下文及調用堆棧，對此感興趣的同學，可以參考下2021-04-04
在這篇文章中, 我將用150行代碼, 手把手帶你打造一個小程序也可以使用的偵聽器，感興趣的朋友跟隨小編一起看看吧2019-05-05
一文搞懂JSON(JavaScript Object Notation)
Json 有兩種基本的結構，即 Json對象 和 Json 數組。通過 Json 對象和 Json 數組這兩種結構的組合可以表示各種復雜的結構，今天通過本文給大家介紹JavaScript Object Notation的基本知識，感興趣的朋友一起看看吧2021-10-10
使javascript也能包含文件...2006-10-10
通過Javascript創(chuàng)建一個選擇文件的對話框代碼
通過Javascript創(chuàng)建一個選擇文件的對話框代碼，需要的朋友可以參考下2012-06-06