js点击当前td单元格背景变色效果详解

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了鼠标点击td单元格能够将其背景颜色改变的效果。

并且当鼠标再点击其他单元格的时候,前一个单元格的背景颜色会还原。

下面就通过代码实例介绍一下如何实现此功能。

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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事件冒泡简单介绍一章节。

js点击当前td单元格背景变色效果详解,这样的场景在实际项目中还是用的比较多的,关于js点击当前td单元格背景变色效果详解就介绍到这了。

js点击当前td单元格背景变色效果详解属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容