<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
  <title>Table</title>
</head>

<script type="text/javascript">
window.$ = function(id) {
  if(typeof id == 'string') {
    return document.getElementById(id);
  }
  return id;
}

var TabClick = function(id, color) {
  this.id = id || 'tab';
  this.color = color || '#ADD8E6';
  this.lastClick = null;
}

TabClick.prototype = {
  // 初始化
  init : function() {

    // 不让选中文本
    var agent = navigator.userAgent.toUpperCase();
    if(agent.indexOf('MSIE') > 0) {
      document.body.onselectstart = function() {return false;}
    }else if(agent.indexOf('GECKO') > 0){
      document.body.style.MozUserSelect = 'none';
    }

    this.addClick();
    this.cancelSelect();
  },

  // 为 tr 添加 onclick 事件
  addClick : function() {
    var rows = this.getRows();
    var obj = this;
    for(var i = 0; i < rows.length; i++) {
      rows[i].defaultBgColor = rows[i].style.backgroundColor;
      rows[i].onclick = function(event) {
        var e = window.event || event;
        obj.cancelBubble(e);
        obj.clickEvent(e, this);
        if(!e.shiftKey) {
          obj.lastClick = this;
        }
      }
    }
  },

  // 点击页面其他部分时取消所有的选择
  cancelSelect : function() {
    var obj = this;
    document.body.onclick = function() {
      obj.clearBgColor();
    }
  },

  // tr click 事件的处理
  clickEvent : function(e, row) {
    if(!e.ctrlKey) {
      this.clearBgColor();
    }
    if(e.shiftKey) {
      this.shiftClick(row);
    } else {
      this.click(row);
    }
  },

  // 单击某个 tr
  click : function(row) {
    if(!row.style.backgroundColor) {
      row.style.backgroundColor = this.color;
    } else {
      row.style.backgroundColor = row.defaultBgColor;
    }
  },

  // 去除已选择的 tr
  clearBgColor : function() {
    var rows = this.getRows();
    for(var i = 0; i < rows.length; i++) {
      rows[i].style.backgroundColor = rows[i].defaultBgColor;
    }
  },

  // 按下 shift 时的处理
  shiftClick : function(row) {
    var start = Math.min(this.lastClick.rowIndex, row.rowIndex);
    var end = Math.max(this.lastClick.rowIndex, row.rowIndex);;
    var rows = this.getRows();
    for(var i = start - 1; i < end; i++) {
      rows[i].style.backgroundColor = this.color;
    }
  },

  // 获得所有的 tr
  getRows : function() {
    if(!this.rows) {
      this.rows = $(this.id).tBodies[0].rows;
    }
    return this.rows;
  },

  // 取消事件冒泡
  cancelBubble : function(event) {
    if(event.stopPropagation) {
      event.stopPropagation();
    }else if(!event.cancelBubble) {
      event.cancelBubble = true;
    }
  }
}

window.onload = function() {
  var tab = new TabClick('tab');
  tab.init();
}
</script>

<style type="text/css">
table#tab {
  font-size: 10pt;
  font-family: "courier new";
  border-collapse: collapse;
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
}
table#tab caption {
  font-size: 12pt;
  font-weight: bold;
  padding-bottom: 10px;
}
table#tab th, table#tab td {
  border-bottom: 1px solid #000000;
  border-right: 1px solid #000000;
  width: 200px;
}
table#tab thead tr {
  background-color: #FFE4C4;
  height: 25px;
}
table#tab th {
  text-align: center;
}
table#tab td {
  padding: 4px 10px;
}
</style>


<body>
  <table id="tab" cellpadding="0" cellspacing="0">
    <caption>event 对象的属性</caption>
    <thead>
      <tr>
        <th>属性描述</th>
        <th>IE 浏览器</th>
        <th>Mozilla 浏览器</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>触发事件的元素</td>
        <td>srcElement</td>
        <td>target</td>
      </tr>
      <tr>
        <td>事件类型</td>
        <td>type</td>
        <td>type</td>
      </tr>
      <tr>
        <td>元素的 x 坐标</td>
        <td>offsetX</td>
        <td>无</td>
      </tr>
      <tr>
        <td>元素的 y 坐标</td>
        <td>offsetY</td>
        <td>无</td>
      </tr>
      <tr>
        <td>定位元素的 x 坐标</td>
        <td>x</td>
        <td>layerX</td>
      </tr>
      <tr>
        <td>定位元素的 y 坐标</td>
        <td>y</td>
        <td>layerY</td>
      </tr>
      <tr>
        <td>窗口的 x 坐标</td>
        <td>clientX</td>
        <td>clientX</td>
      </tr>
      <tr>
        <td>窗口的 y 坐标</td>
        <td>clientY</td>
        <td>clientY</td>
      </tr>
      <tr>
        <td>屏幕的 x 坐标</td>
        <td>screenX</td>
        <td>screenX</td>
      </tr>
      <tr>
        <td>屏幕的 y 坐标</td>
        <td>screenY</td>
        <td>screenY</td>
      </tr>
      <tr>
        <td>鼠标按键</td>
        <td>button</td>
        <td>button</td>
      </tr>
      <tr>
        <td>键盘按键</td>
        <td>keyCode</td>
        <td>keyCode</td>
      </tr>
      <tr>
        <td>按下 shift 键</td>
        <td>shiftKey</td>
        <td>shiftKey</td>
      </tr>
      <tr>
        <td>按下 alt 键</td>
        <td>altKey</td>
        <td>altKey</td>
      </tr>
      <tr>
        <td>按下 ctrl 键</td>
        <td>ctrlKey</td>
        <td>ctrlKey</td>
      </tr>
      <tr>
        <td>上一级元素</td>
        <td>fromElement</td>
        <td>relatedTarget</td>
      </tr>
      <tr>
        <td>下一级元素</td>
        <td>toElement</td>
        <td>relatedTarget</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

posted on 2008-09-24 11:55  许维光  阅读(246)  评论(0)    收藏  举报