javascript修改表格背景色實(shí)例代碼分享
更新時(shí)間：2013年12月10日 10:46:40 作者：
這篇文章主要介紹了javascript修改表格背景色實(shí)例，代碼簡(jiǎn)單，大家參考使用吧
復(fù)制代碼 代碼如下:
<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)事件
}
}
}
//移過(guò)時(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為什么這樣寫(xiě)參考我之前寫(xiě)的通過(guò)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"> </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>相關(guān)內(nèi)容</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>相關(guān)內(nèi)容</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>相關(guān)內(nèi)容</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
</table>
</body>
</html>
您可能感興趣的文章:
- angularjs實(shí)現(xiàn)table表格td單元格單擊變輸入框/可編輯狀態(tài)示例
- js生成動(dòng)態(tài)表格并為每個(gè)單元格添加單擊事件的方法
- vuejs element table 表格添加行,修改,單獨(dú)刪除行,批量刪除行操作
- angularJs 表格添加刪除修改查詢(xún)方法
- JS實(shí)現(xiàn)動(dòng)態(tài)表格的添加，修改，刪除功能(推薦)
- JS動(dòng)態(tài)修改表格cellPadding和cellSpacing的方法
- js動(dòng)態(tài)修改表格行colspan列跨度的方法
- 查詢(xún)綁定數(shù)據(jù)島的表格中的文本并修改顯示方式的js代碼
- js實(shí)現(xiàn)單擊可修改表格
相關(guān)文章
這篇文章主要介紹了理解JavaScript單一職責(zé)原則，單一職責(zé)原則（SRP：Single?responsibility?principle）又稱(chēng)單一功能原則，面向?qū)ο笪鍌€(gè)基本原則（SOLID）之一，下文更多相關(guān)介紹感興趣的小伙伴可以參考一下2022-08-08
這篇文章主要介紹了微信小程序文件下載視頻和圖片，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
本篇文章主要介紹了webpack中的熱刷新與熱加載的區(qū)別，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
這篇文章主要介紹了javascript如何判斷輸入的url是否正確,需要的朋友可以參考下2014-04-04
axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，下面這篇文章主要給大家介紹了axios學(xué)習(xí)教程的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考價(jià)值，需要的朋友下面來(lái)一起看看吧。2017-03-03
詳解JavaScript中的執(zhí)行上下文及調(diào)用堆棧
這篇文章主要介紹了JavaScript中的執(zhí)行上下文及調(diào)用堆棧，對(duì)此感興趣的同學(xué)，可以參考下2021-04-04
150行代碼帶你實(shí)現(xiàn)微信小程序中的數(shù)據(jù)偵聽(tīng)
在這篇文章中, 我將用150行代碼, 手把手帶你打造一個(gè)小程序也可以使用的偵聽(tīng)器，感興趣的朋友跟隨小編一起看看吧2019-05-05
一文搞懂JSON(JavaScript Object Notation)
Json 有兩種基本的結(jié)構(gòu)，即 Json對(duì)象 和 Json 數(shù)組。通過(guò) Json 對(duì)象和 Json 數(shù)組這兩種結(jié)構(gòu)的組合可以表示各種復(fù)雜的結(jié)構(gòu)，今天通過(guò)本文給大家介紹JavaScript Object Notation的基本知識(shí)，感興趣的朋友一起看看吧2021-10-10
使javascript也能包含文件...2006-10-10
通過(guò)Javascript創(chuàng)建一個(gè)選擇文件的對(duì)話框代碼
通過(guò)Javascript創(chuàng)建一個(gè)選擇文件的對(duì)話框代碼，需要的朋友可以參考下2012-06-06