js點選當前td單元格背景變色效果詳解

antzone發表於2017-04-12
JS

本章節分享一段程式碼例項，它實現了滑鼠點選td單元格能夠將其背景顏色改變的效果。

並且當滑鼠再點選其他單元格的時候，前一個單元格的背景顏色會還原。

下面就通過程式碼例項介紹一下如何實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#tb td{
  background:#ccc;
}
</style>
<script tyle="text/javascript">
var oldTD = null;
var oldColor = "#ccc";
function SetColor(ev){
  var ev = ev || window.event;
  var obj = ev.srcElement||ev.target;
  if (obj.tagName != "TD") return
  obj.style.backgroundColor = "red";
  if (oldTD) {
    oldTD.style.backgroundColor = oldColor;
  }
  oldTD = obj;
}
window.onload = function(){
  var table = document.getElementById("tb");
  table.onclick = function (ev) {
    var ev = ev || window.event;
    SetColor(event)
  }
}
</script>
</head>
<body>
<table id="tb" width="500" border="1">
  <tr>
    <td width="93" height="29">螞蟻部落一</td>
    <td width="93" height="29">螞蟻部落二</td>
    <td width="93" height="29">螞蟻部落三</td>
  </tr>
</table>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.var oldTD = null，宣告一個變數並賦初值為null，用來存放上一個點選的td單元格物件。

（2）.var oldColor = "#ccc"，用來存放td單元格最初的背景顏色。

（3）.function SetColor(ev){}，click事件處理函式。

（4）.var ev = ev || window.event，相容所有瀏覽器的事件物件。

（5）.var obj = ev.srcElement||ev.target，相容所有瀏覽器的事件源物件。

（6）.if (obj.tagName != "TD") return，如果點選的不是td單元格那麼直接跳出。

（7）.obj.style.backgroundColor = "red"，設定當前點選的td單元格的背景顏色。

（8）.if (oldTD) {  oldTD.style.backgroundColor = oldColor;

},如果存在上一個單元格，那麼就將上一個單元格的背景顏色恢復。

（9）.oldTD = obj，將當前點選的單元格存入變數。

（10）.window.onload = function(){

  var table = document.getElementById("tb");

  table.onclick = function (ev) {

    var ev = ev || window.event;

    SetColor(event)

  }

}註冊事件處理函式。

將事件註冊在table上而不是td上是利用了事件冒泡現象。

二.相關閱讀:

（1）.var ev = ev || window.event可以參閱var ev=window.event||ev的作用是什麼一章節。

（2）.srcElement可以參閱javascript event.srcElement屬性一章節。

（3）.target可以參閱javascript event.target一章節。

（4）.tagName可以參閱javascipt tagName一章節。

（5）.事件冒泡可以參閱javascript事件冒泡簡單介紹一章節。

相關文章