兼容ie6及以上的表格行滑过时背景色切换的效果

;(function(window){
    var tb = document.getElementById('tablelist');
    function trfocus(){//为了兼容IE6在css中td不要设置背景颜色，否则会遮挡住tr背景颜色的变换.在标准浏览器中可以直接用样式控制鼠标滑过时，切换表格行背景色的效果，代码是：
    //.tablelist tr:hover td{background: #e2f3fe;color: #2d9ff1;}
        var e = event.srcElement || event.target;
        if (e.tagName == 'TD') {//e.parentNode就是tr
            e.parentNode.style.backgroundColor = '#e2f3fe';
            var tds = e.parentNode.getElementsByTagName('td');
            for(var i = 0;i<tds.length;i++){
                tds[i].style.color = '#2d95f1';
            }
            // e.style.color = '#2d95f1';当前td
        };
    }
    function trblur(){
        var e = event.srcElement || event.target;
        if (e.tagName == 'TD') {
            e.parentNode.style.backgroundColor = '#fff';
            var tds = e.parentNode.getElementsByTagName('td');
            for(var i = 0;i<tds.length;i++){
                tds[i].style.color = '#333';
            }
        };
    }
    for(var i = 1;i<tb.rows.length;i++){
        var row = tb.rows[i];
        if (document.addEventListener) {
            row.addEventListener('mouseover',trfocus,false);
            row.addEventListener('mouseout',trblur,false);
        } else if(document.attachEvent) {
            row.attachEvent('onmouseover',trfocus);
            row.attachEvent('onmouseout',trblur);
        } else{
            row.onmouseover = function(){
                trfocus();
            }
            row.onmouseout = function(){
                trblur();
            }
        }
    }
})(window);


//小结：js原生中的事件方法addEventListener()以及样式编程dom.style....等只对单个元素或DOM节点起效果，对于标签集来说就要用for循环来获取单个元素才能绑定事件方法和样式编程属性。