表格斑馬紋與行懸停高亮是經典需求，網上代碼多但鮮有封裝成「開箱即用類」者。本文提供一個含 addClass 輔助的完整類，參數化配置，刪減代碼即可單獨使用任一效果。

核心代碼

// @Mr.Think -- 添加樣式輔助
function addClass(elem, value) {
  if (!elem.className) elem.className = value;
  else elem.className += " " + value;
}

// @Mr.Think -- 隔行高亮 + 滑鼠懸停高亮
function highLight(elemId, tagName, tagNameHighClass, crossTagNameClass) {
  if (!document.getElementById || !document.getElementById(elemId) || !document.getElementsByTagName) return false;
  var container = document.getElementById(elemId);
  var rows = container.getElementsByTagName(tagName);

  // 隔行高亮（odd=true 為奇數行）
  var odd = true;
  for (var i = 0; i < rows.length; i++) {
    if (odd) { addClass(rows[i], tagNameHighClass); odd = false; }
    else odd = true;
  }

  // 滑鼠懸停高亮
  for (var m = 0; m < rows.length; m++) {
    rows[m].oldClassName = rows[m].className;
    rows[m].onmouseover = function() { addClass(this, crossTagNameClass); };
    rows[m].onmouseout  = function() { this.className = this.oldClassName; };
  }
}

參數說明

參數	含義
elemId	表格/容器 ID
tagName	目標標籤（如 tr、li、p）
tagNameHighClass	隔行高亮類名
crossTagNameClass	懸停高亮類名

調用示例

window.onload = function() {
  highLight("myTable", "tr", "odd-row", "hover-row");
};

單獨使用技巧

• 只需隔行高亮：刪除「滑鼠懸停」整段 for 迴圈。
• 只需懸停高亮：刪除「隔行高亮」整段 for 迴圈。

適合初學者直接引用，亦可作為學習「類封裝、事件代理、狀態保存」的教學範例。