精通js部分代码应用--鼠标经过tr变色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>豪情</title>
<meta content="by 豪情" name="keywords" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:12px;font-family:arial, '宋体';background:#fff;color:#727272;}
form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
img{border:0;}ul,li{list-style-type:none;}
.tc{text-align:center;}.tl{text-align:left;}.tr{text-align:right;}.dis{display:block;}.undis{display:none;}
.fl{float:left;}.fr{float:right;}.clear{clear:both;}em{font-style:normal;}.cp{cursor:pointer;}
select,input,button{font:12px/20px Verdana,Simsun,Helvetica,Arial,sans-serif;}
input,select{vertical-align:middle;}
a{color:#8b5092;text-decoration:none;}
a:hover{color:#090;text-decoration:underline;}
a:focus{outline:0;}
.blank_tab{border-collapse:collapse;border:1px solid #ccc;}
.blank_tab th{border:1px solid #ccc;}
.blank_tab td{border:1px solid #ccc;padding:2px 2px 2px 5px;}
/* tab */
.my_data_tabwrap{width:800px;margin:0 auto 15px;padding-top:30px;}
.tb_data_tab{border-collapse:collapse;border:1px solid #aec1e1;}
.tb_data_tab th{border:1px solid #aec1e1;height:30px;background:#c3d8f5;color:#001f4f;padding:3px 0;}
.tb_data_tab td{border:1px solid #aec1e1;padding:2px 2px 2px 5px;height:30px;}
.tb_data_tab tr{cursor:pointer;}
.tab_intro h4{text-align:center;font-size:14px;color:#000;line-height:25px;}
.tab_head{height:30px;line-height:30px;color:#000;}
.tab_head strong{color:#369;}
.tab_date_info{float:right;}
.tab_busname{float:left;}
.tab_foot_info{float:right;}
.tab_foot_info em{margin-left:10px;}
.trhover{background:#aef;}
.trout{background:#fff;}
.trclick{background:#fc0;}
</style>
</head>
<body>
<table id="myTabData" class="tb_data_tab" style="margin:50px auto;" width="800">
<tr>
<th>序号</th>
<th>支付银行</th>
<th>支付银行</th>
<th>支付银行</th>
<th>支付银行</th>
<th>支付银行</th>
<th>备注</th>
</tr>
<tr>
<td><input type="checkbox" name="" id="" /></td>
<td></td>
<td></td>
<td>333</td>
<td>212</td>
<td>ewe</td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" /></td>
<td></td>
<td>22</td>
<td></td>
<td>33</td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" /></td>
<td></td>
<td>22</td>
<td></td>
<td>33</td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" /></td>
<td></td>
<td>22</td>
<td></td>
<td>33</td>
<td></td>
<td></td>
</tr>
</table>
  <script type="text/javascript">
function id(){
     return document.getElementById(arguments[0]);
} 
function tag(name, elem){
     return (elem || document).getElementsByTagName(name)
}
/**
  * 添加事件
  * @param {Object} obj
  * @param {Object} type 事件类型
  * @param {Function} fun 事件处理函数
  */
function addEvent(obj, type, fun){
     if(obj.addEventListener){
         obj.addEventListener(type, fun, false);
     } else if(obj.attachEvent){
         obj.attachEvent('on' + type, function() {
             fun.call(obj, window.event);
         });
     } else {
         obj['on' + type] = function() {
             fun.call(obj, window.event);
         }
     }
}
/**
  * 
  * @param {String} elem
  * @param {String} name
  * @param {String} value
  */
function attr(elem, name, value){
     if(!name || name.constructor != String){
         return '';
     }
     //检查name的属性是否在怪异命名情形中
     name = {'for': 'htmlFor', 'class': 'className'}[name] || name;
     if(typeof value != 'undefined'){
         elem[name] = value;
         if(elem.setAttribute){
             elem.setAttribute(name, value);
         }
     }
     return elem[name] || elem.getAttribute(name) || '';
}
function tabhover(tab, hoverClass, outClass, clickClass){
     oTab = id(tab);
     if(typeof oTab == undefined) { return false;};
     oTabTr = tag('tr', oTab);
     var oInputEle = tag('input', oTab);
     for(var i=1, len=oTabTr.length; i<len; i++){
         oTabTr[i].i = i;
         addEvent(oTabTr[i], 'click', function(){
             this.className = clickClass;
             attr(this, 'open') == 'true' ? attr(this, 'open', 'false') : attr(this, 'open', 'true');
             oInputEle[this.i-1].checked = !!oInputEle[this.i-1].checked ? false : true;
         });
         addEvent(oTabTr[i], 'mouseover', function(){
             this.className = hoverClass;
         });
         addEvent(oTabTr[i], 'mouseout', function(){
             this.className = attr(this, 'open') == 'true' ? clickClass : outClass;
         });
     }
}
tabhover('myTabData', 'trhover', 'trout', 'trclick');
</script></body>
</html>

posted @ 2011-07-28 18:39 豪情阅读(3165) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

精通js部分代码应用--鼠标经过tr变色

公告