### （兼容FF/IE）TD点击背景变色特效解析
#### 一、概述
本文将详细介绍一个兼容Firefox（FF）和Internet Explorer（IE）浏览器的HTML表格单元格（`<td>`）点击背景变色特效的实现方法。该特效允许用户通过点击表格中的单元格来改变其背景颜色，并且具有良好的跨浏览器兼容性。
#### 二、关键技术点
1. **CSS样式定义**：定义了四类不同的背景颜色和文本对齐方式。
2. **JavaScript事件处理**：使用原生JavaScript添加事件监听器来响应用户的点击行为。
3. **DOM操作**：利用DOM API来修改元素的类名，从而改变背景颜色。
#### 三、CSS样式详解
##### 1. `.class1`
- `background:#efefef;`：设置了浅灰色的背景颜色。
- `text-align:center;`：使单元格内的文本居中显示。
- `width:80px;`：设置单元格宽度为80像素。
##### 2. `.class2`
- `background:#ffcc00;`：设置了亮黄色的背景颜色。
- 其他属性与`.class1`相同。
##### 3. `.class3`
- `background:#ffffff;`：设置了白色背景。
- 这个类用于重置背景颜色到默认状态。
##### 4. `.class4`
- `background:#ffff00;`：设置了鲜艳的黄色背景。
- 这个类用于表示一种特殊的背景颜色变化效果。
#### 四、JavaScript代码解析
##### 1. `addEvent`函数
- **功能**：向指定的DOM元素添加事件监听器。
- **参数**：
- `elm`：目标DOM元素。
- `evType`：事件类型（如"click"）。
- `fn`：事件处理函数。
- `useCapture`：布尔值，是否在捕获阶段触发事件。
- **实现逻辑**：
- 首先检查元素是否支持`addEventListener`方法。
- 如果不支持，则尝试使用`attachEvent`方法。
- 如果以上两种方法都不支持，则弹出警告提示。
##### 2. `initTd`函数
- **功能**：初始化所有的表格单元格，并为它们添加点击事件监听器。
- **步骤**：
- 获取所有`<td>`元素。
- 遍历这些元素，并为其中标记有特定属性的元素添加样式和事件监听器。
- 使用`setAttribute`方法检查每个单元格是否具有属性`t`，如果为`yes`则应用`.class1`样式。
- 为这些单元格添加点击事件监听器。
#### 五、示例代码分析
```html
<script type="text/javascript">
function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent) {
var r = elm.attachEvent("on" + evType, fn);
return r;
} else {
alert("Handler could not be removed");
}
}
function initTd() {
var sections = document.getElementsByTagName("td");
for (var i = 0; i < sections.length; i++) {
var section = sections[i];
if (section.getAttribute("t") == "yes") {
section.className = "class1";
// 以下代码可能不完整或存在错误，需要进一步补全或修正
section.nextSibling.className = ...
}
}
}
</script>
```
这段示例代码展示了如何使用JavaScript为表格单元格添加点击事件监听器。但是，需要注意的是代码中`initTd`函数的部分内容未完全展示，实际使用时需要根据具体需求补全这部分内容。
#### 六、总结
本文介绍了一个简单的但实用的HTML表格单元格点击变色特效。通过使用CSS定义不同的样式，并结合JavaScript来添加事件监听器和动态修改元素样式，实现了兼容主流浏览器的效果。此技术不仅适用于旧版本的IE浏览器，也适用于现代浏览器，具有广泛的适用性。
