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

zoukankan html css js c++ java

精通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{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>

查看全文

相关阅读:
《代码之道》试读：规范书变更请求
 解读ASP.NET MVC 4 规划路线图
 淘宝数据魔方技术架构解析
 《程序员实用算法》试读：1.2.2主要的优化：函数调用
 《软件框架设计的艺术》试读：2.2　模块化应用程序
 磁盘分割原理
 无锡云计算中心3年内到底做了什么
 模式识别的一些资料
 边缘检测算法
 用递归方法来搜索连通区域

原文地址：https://www.cnblogs.com/jikey/p/2119853.html