JavaScript實現(xiàn)點(diǎn)擊單元格改變背景色的方法
更新時間：2016年02月12日 10:09:39 作者：征服者X
這篇文章主要介紹了JavaScript實現(xiàn)點(diǎn)擊單元格改變背景色的方法,涉及JavaScript響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下
本文實例講述了JavaScript實現(xiàn)點(diǎn)擊單元格改變背景色的方法。分享給大家供大家參考，具體如下：
<html>
<body>
<table onclick="SetColor(event)" id="_t" width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="93" height="29" background="hotlinkbg.gif" align="center">出租信息</td>
<td width="93" height="29" background="hotlinkbg.gif" align="center">求租信息</td>
<td width="314" height="29" background="hotlinkbg.gif" ></td>
</tr>
</table>
<table width="500">
<tr>
<td>aaaaa</td>
<td>bbbbb</td>
<td>ccccc</td>
<td>ddddd</td>
</tr>
</table>
<script tyle="text/javascript">
var oldClr = new Array()
function SetColor(e)
{
if (!e) e = window.event;
var obj
if(window.event)
obj = e.srcElement
else
obj = e.target
if(obj.tagName != "TD") return
var oldTD = obj
while( obj.tagName != "TR")
obj = obj.parentNode
var i
for(i = 0;i<obj.cells.length;i++)
{
if(obj.cells[i] == oldTD) break
}
var table = document.getElementById("_t")
for(j = 0;j<table.rows.length;j++)
{
//如果要刪除其它列的顏色，請加上下面的3行
for(m = 0;m < table.rows[j].cells.length;m++)
{
table.rows[j].cells[m].background = oldClr[m]
}
//table.rows[j].cells[i].bgColor = table.rows[j].cells[i].background="button1_on.gif"
table.rows[j].cells[i].background = table.rows[j].cells[i].background==oldClr[i]?"button1_on.gif":oldClr[i]
}
}
window.onload = function()
{
var table = document.getElementById("_t")
for(j = 0;j<table.rows[0].cells.length;j++)
{
oldClr[j] = table.rows[0].cells[j].background
}
}
</script>
</body>
</html>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript動畫特效與技巧匯總》、《JavaScript運(yùn)動效果與技巧匯總》及《JavaScript錯誤與調(diào)試技巧總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
您可能感興趣的文章:
- js點(diǎn)擊彈出div層實現(xiàn)可拖曳的彈窗效果
- CSS+JS實現(xiàn)點(diǎn)擊文字彈出定時自動關(guān)閉DIV層菜單的方法
- js+CSS實現(xiàn)彈出居中背景半透明div層的方法
- JS彈出可拖拽可關(guān)閉的div層完整實例
- JS實現(xiàn)帶圓弧背景漸變效果的導(dǎo)航菜單代碼
- JS實現(xiàn)進(jìn)入頁面時漸變背景色的方法
- javascript設(shè)置頁面背景色及背景圖片的方法
- js獲取及修改網(wǎng)頁背景色和字體色的方法
- JavaScript實現(xiàn)的背景自動變色代碼
- javascript實現(xiàn)網(wǎng)頁背景煙花效果的方法
- js點(diǎn)擊列表文字對應(yīng)該行顯示背景顏色的實現(xiàn)代碼
- 神奇！js+CSS+DIV實現(xiàn)文字顏色漸變效果
- JavaScript+html5 canvas繪制漸變區(qū)域完整實例
- JavaScript實現(xiàn)彈出DIV層同時頁面背景漸變成半透明效果
相關(guān)文章
使用事件委托技術(shù)能讓你避免對特定的每個節(jié)點(diǎn)添加事件監(jiān)聽器；相反，事件監(jiān)聽器是被添加到它們的父元素上2014-04-04
對于js的一些常見事件的總結(jié)2008-12-12
微信小程序iBeacon測距及穩(wěn)定程序的實現(xiàn)解析
這篇文章主要介紹了微信小程序iBeacon測距及穩(wěn)定程序的實現(xiàn)解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07
Javascript異步編程模型Promise模式詳細(xì)介紹
異步模式在 Web 編程中變得越來越重要，如何處理異步請求后的操作是一件麻煩事。Promise 是一種異步編程模型，術(shù)語稱作 Deferred 模式，它通過一組API來規(guī)范化異步操作，讓異步操作的流程控制更加容易。2014-05-05
spirngmvc js傳遞復(fù)雜json參數(shù)到controller的實例
下面小編就為大家分享一篇spirngmvc js傳遞復(fù)雜json參數(shù)到controller的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要給大家介紹了關(guān)于Echarts?3D散點(diǎn)圖的相關(guān)資料, Echarts散點(diǎn)圖是一種常用的數(shù)據(jù)可視化圖表類型,用于展示兩個或多個維度的數(shù)據(jù)分布情況,需要的朋友可以參考下2023-11-11
js如何使用Pagination+PageHelper實現(xiàn)分頁
本文主要介紹了js如何使用Pagination+PageHelper實現(xiàn)分頁，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
JS+HTML實現(xiàn)的圓形可點(diǎn)擊區(qū)域示例【3種方法】
這篇文章主要介紹了JS+HTML實現(xiàn)的圓形可點(diǎn)擊區(qū)域,結(jié)合實例形式分析了javascript結(jié)合HTML元素屬性實現(xiàn)一個圓形的可點(diǎn)擊區(qū)域相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
js 點(diǎn)擊按鈕彈出另一頁，選擇值后，返回到當(dāng)前頁
js 點(diǎn)擊按鈕彈出另一頁，選擇值后，返回到當(dāng)前頁，其實主要用于cms系統(tǒng)中，相關(guān)文章的搜索，要在已上傳目錄中選擇一些圖片等。2010-05-05
無名函數(shù)，其中一個作用可能是生成新的函數(shù)對象的引用，主要是用于定義。2011-06-06