高效的表格行背景隔行變色及選定高亮的JS代碼
//點(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);
}
關(guān)于最后兩個(gè)函數(shù)resumeRowOver和resumeRowOut為什么這樣寫參考我之前寫的通過js給頁(yè)面元素添加事件
對(duì)應(yīng)的表格HTML
<table width="100%" border="0" cellspacing="0" 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>
- JS控制表格隔行變色
- javascript實(shí)現(xiàn)table表格隔行變色的方法
- js實(shí)現(xiàn)鼠標(biāo)經(jīng)過表格行變色的方法
- 原生JS操作網(wǎng)頁(yè)給p元素添加onclick事件及表格隔行變色
- 一個(gè)簡(jiǎn)單但常用的javascript表格樣式_鼠標(biāo)劃過行變色 簡(jiǎn)潔實(shí)現(xiàn)
- javascript基于jQuery的表格懸停變色/恢復(fù),表格點(diǎn)擊變色/恢復(fù),點(diǎn)擊行選Checkbox
- 用JS控制表格的逐行變色的表單
- javascript表格隔行變色加鼠標(biāo)移入移出及點(diǎn)擊效果的方法
- js兼容標(biāo)準(zhǔn)的表格變色效果
- JS實(shí)現(xiàn)表格隔行變色
相關(guān)文章
javascript實(shí)現(xiàn)tab切換特效
這篇文章主要介紹了javascript實(shí)現(xiàn)tab切換特效,實(shí)現(xiàn)的方法很簡(jiǎn)單,特別適合初學(xué)者學(xué)習(xí)javascript實(shí)現(xiàn)tab切換特效,tab切換再也不是問題,需要的朋友可以參考下2015-11-11
防止頁(yè)面被iframe(兼容IE,Firefox火狐)
以前發(fā)布的防止被iframe的代碼,容易在火狐瀏覽器下, 不斷的刷新頁(yè)面。所以從網(wǎng)站找到了這篇文章。2010-07-07
JavaScript 定義function的三種方式小結(jié)
JavaScript中定義function有以下三種方式.2009-10-10
JavaScript使用canvas繪制坐標(biāo)和線
這篇文章主要為大家詳細(xì)介紹了JavaScript使用canvas繪制坐標(biāo)和線,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04
JS實(shí)現(xiàn)中英文混合文字溢出友好截取功能
這篇文章主要介紹了JS實(shí)現(xiàn)中英文混合文字溢出友好截取功能,通常會(huì)用到j(luò)s的 substr 或者 substring方法, 以及 字符串的length屬性。需要的朋友可以參考下2018-08-08
javascript中的self和this用法小結(jié)
本篇文章主要是對(duì)javascript中的self和this用法進(jìn)行了詳細(xì)的總結(jié)介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-02-02
原生JS與CSS實(shí)現(xiàn)軟件卸載對(duì)話框功能
今天給大家分享一個(gè)特別有意思的軟件卸載對(duì)話框功能,本段代碼是基于js 與css實(shí)現(xiàn)的,感興趣的朋友跟隨小編一起看看吧2019-12-12
Bootstrap開發(fā)實(shí)戰(zhàn)之第一次接觸Bootstrap
Bootstrap開發(fā)實(shí)戰(zhàn)之第一次接觸Bootstrap,想要學(xué)好一門語(yǔ)言,首先應(yīng)該進(jìn)行深入了解,感興趣的小伙伴們可以參考一下2016-06-06
Bootstrap Scrollspy源碼學(xué)習(xí)
這篇文章主要介紹了Bootstrap Scrollspy源碼學(xué)習(xí),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03
JavaScript實(shí)現(xiàn)的前端AES加密解密功能【基于CryptoJS】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的前端AES加密解密功能,涉及javascript基于CryptoJS插件進(jìn)行AES加密解密操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-08-08

