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>
运行代码
查看全文
相关阅读:
Chrome---谷歌浏览器修改用户缓存文件夹 如何设置缓存路径
Web移动端---iPhone X适配(底部栏黑横线)
vue 项目使用 webpack 构建自动获取电脑ip地址
vue+webpack项目打包后背景图片加载不出来问题解决
免费苹果账号(apple id)申请ios证书p12真机调试
将Vue移动端项目打包成手机app---HBuilder
JS --- 本地保存localStorage、sessionStorage用法总结
zTree & ckeditor &ValidateCode.jar 使用个人心得总结
Java web实现综合查询+SQL语句拼接
从小工到专家 2019.11.17
原文地址:https://www.cnblogs.com/jikey/p/2119853.html
最新文章
kubectl get pods The connection to the server was refused
linux 学习
kubernetes 核心原理
kubernetes 学习 service相关
kubernetes 学习 pod相关
kubernetes 学习 常用命令
docker 学习(十一) 镜像常用命令
docker 学习(十) 容器常用命令
【转】推荐系统评测指标—准确率(Precision)、召回率(Recall)、F值(F-Measure)
【转】Java垃圾收集器
热门文章
【转】深入理解JVM—JVM内存模型
【转】Scala: Example use for early definition / early initializer / pre-initialized fields
【转】 Mysql全文搜索match...against的用法
【转】Akka 快速入门
【转】同一台电脑关于多个SSH KEY管理
【转】ZooKeeper原理及使用
【转】【总结】String in Java
javascript 总结(常用工具类的封装)
vue中的适配:px2rem
关于 html input标签的几个常用操作
Copyright © 2011-2022 走看看