JS實(shí)現(xiàn)的表格行鼠標(biāo)點(diǎn)擊高亮效果代碼
本文實(shí)例講述了JS實(shí)現(xiàn)的表格行鼠標(biāo)點(diǎn)擊高亮效果代碼。分享給大家供大家參考,具體如下:
偶爾在看天天基金網(wǎng)凈值公告時(shí),從源代碼里剝下的一段js代碼,感覺比較實(shí)用,分享一下(僅IE有效)
<script type="text/javascript">
var highlightcolor='#E0F2FE';
var clickcolor='#ffedd2';
function MouseOver(){
var source=event.srcElement;
if (source.tagName=="TD"){
source=source.parentElement;
var cells = source.children;
if (cells[0].style.backgroundColor!=highlightcolor&&cells[0].style.backgroundColor!=clickcolor)
for(i=0;i<cells.length;i++){
cells[i].style.backgroundColor=highlightcolor;
}
}
}
function MouseOut(){
var source=event.srcElement;
if (source.tagName=="TD"){
source=source.parentElement;
var cells = source.children;
if (cells[0].style.backgroundColor!=clickcolor)
for(i=0;i<cells.length;i++){
cells[i].style.backgroundColor="";
}
}
}
function MouseClick(){
var source=event.srcElement;
if (source.tagName=="TD"){
source=source.parentElement;
var cells = source.children;
if (cells[0].style.backgroundColor!=clickcolor)
for(i=0;i<cells.length;i++)
cells[i].style.backgroundColor=clickcolor;
else
for(i=0;i<cells.length;i++)
cells[i].style.backgroundColor="";
}
}
</script>
<table onmouseover="MouseOver()" onclick="MouseClick()" onmouseout="MouseOut()" cellspacing="0" bordercolordark="#ffffff" bordercolorlight="#cccccc" border="1" width="80%" align="center" style="cursor:pointer">
<tr>
<td>1</td>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>2</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>3</td>
<td>e</td>
<td>f </td>
</tr>
<tr>
<td>4</td>
<td>g</td>
<td>h </td>
</tr>
</table>
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- js實(shí)現(xiàn)當(dāng)鼠標(biāo)移到表格上時(shí)顯示這一格全部?jī)?nèi)容的代碼
- 基于JS代碼實(shí)現(xiàn)當(dāng)鼠標(biāo)懸停表格上顯示這一格的全部?jī)?nèi)容
- js實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)表格行變色的方法
- javascript表格隔行變色加鼠標(biāo)移入移出及點(diǎn)擊效果的方法
- JS實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊展開或隱藏表格行的方法
- 鼠標(biāo)拖動(dòng)動(dòng)態(tài)改變表格的寬度的js腳本 兼容ie/firefox
- 一個(gè)簡(jiǎn)單但常用的javascript表格樣式_鼠標(biāo)劃過(guò)行變色 簡(jiǎn)潔實(shí)現(xiàn)
- Javaweb 鼠標(biāo)移入移出表格顏色變化的實(shí)現(xiàn)
相關(guān)文章
JavaScript使ifram跨域相互訪問(wèn)及與PHP通信的實(shí)例
這篇文章主要介紹了JavaScript使ifram跨域相互訪問(wèn)及與PHP通信的實(shí)例,同時(shí)對(duì)同域間的訪問(wèn)也作了詳細(xì)的演示,需要的朋友可以參考下2016-03-03
原生javascript實(shí)現(xiàn)文件異步上傳的實(shí)例講解
下面小編就為大家?guī)?lái)一篇原生javascript實(shí)現(xiàn)文件異步上傳的實(shí)例講解。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
將rmb數(shù)字位錢數(shù)轉(zhuǎn)化為中文錢數(shù)的js函數(shù)
用力將用戶輸入的錢數(shù),中文化輸出的函數(shù)代碼,需要的朋友可以參考下。2010-07-07
Javascript 檢測(cè)鍵盤按鍵信息及鍵碼值對(duì)應(yīng)介紹
Javascript中有3個(gè)事件句柄在對(duì)應(yīng)鍵盤的輸入狀態(tài):按鍵被按下(按下按鍵但還沒(méi)有抬起)、點(diǎn)擊按鍵(按下并抬起按鍵)、按鍵抬起(按鍵抬起之后),接下來(lái)詳細(xì)介紹,感興趣的朋友可以了解下2013-01-01
Bootstrap Table服務(wù)器分頁(yè)與在線編輯應(yīng)用總結(jié)
這篇文章主要介紹了Bootstrap Table服務(wù)器分頁(yè)與在線編輯應(yīng)用總結(jié) 的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08
Ionic學(xué)習(xí)日記實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)
本篇文章主要介紹了Ionic學(xué)習(xí)日記實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02

