JavaScript通过事件代理高亮显示表格行的方法
2015-05-27 17:18
671 查看
本文实例讲述了JavaScript通过事件代理高亮显示表格行的方法。分享给大家供大家参考。具体实现方法如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Highlight Rows</title> <style type="text/css"> table { background-color: lightgreen; } #third { background-color: yellow; } </style> </head> <body> <!-- Demonstrating "Event Delegation" to highlight table' rows on mouseover. Arguments can be passed via the delegate. My site:andrew.dx.am --> <table id="thetable" summary="highlight demo"> <tr><td>Just one</td><td>.. no another</td></tr> <tr><td>Second</td><td>.. no another</td></tr> <tr id="third"><td>A third</td><td>.. no another</td></tr> <tr><td>Fourth for luck</td><td>.. no another</td></tr> </table> <script type="text/javascript"> var addEvent = function (elem, eventType, func) { if ( elem.addEventListener ) addEvent = function (elem, eventType, func) { elem.addEventListener(eventType, func, false); }; else if ( elem.attachEvent ) addEvent = function (elem, eventType, func) { elem.attachEvent('on' + eventType, func); }; addEvent(elem, eventType, func); }; var delegateEvent = function (elem, childElems, eventType, func, args) { addEvent(elem, eventType, function (e) { var evt = e || window.event; var elem = evt.target || evt.srcElement; if ( elem.nodeName.toLowerCase() == childElems.toLowerCase() ) { func(elem, args); } }); }; function highlightRows(obj, args) { if (args && args.over) { obj.prevColour = obj.parentNode.style.backgroundColor; obj.parentNode.style.backgroundColor = args.colour; if (args.index && obj.title == "") obj.title = "Row " + obj.parentNode.rowIndex; } else { obj.parentNode.style.backgroundColor = ""; if (obj.title.indexOf("Row ") + 1) obj.title = ""; } } function init() { delegateEvent(document.getElementById('thetable'), 'td', 'mouseover', highlightRows, {'colour': 'lightblue', 'over': true, 'index': true}); delegateEvent(document.getElementById('thetable'), 'td', 'mouseout', highlightRows, {'over': false}); } addEvent(window, 'load', init); </script> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- JavaScript通过事件代理高亮显示表格行的方法
- javascript上下方向键控制表格行选中并高亮显示的方法
- javascript上下方向键控制表格行选中并高亮显示的方法
- 【javascript】表格行间隔显示颜色,并实现高亮显示效果
- javascript通过改变滚动条滚动来显示某些元素的scrollIntoView()方法
- js---JavaScript中的事件委托/事件代理,如何通过事件委托进行异步DOM事件监听
- JavaScript-实例(表格行颜色间隔显示并高亮)
- javascript实现通过表格绘制颜色填充矩形的方法
- JavaScript通过代码调用Flash显示的方法
- 通过Javascript运用四种方法动态创建表格,并测试性能优劣[复习]
- 在html页面用ajax的简单应用通过javascript得到数据库中的图片路径并在表格中显示出来
- javascript表格行高亮显示
- JavaScript通过代码调用Flash显示的方法
- [转]javascript 快速隐藏/显示万行表格列的方法
- 通过jquery addClass()方法,给指定按钮添加高亮显示效果
- 关于textview中表示文字段落时,特定区域显示高亮颜色和点击事件的方法
- 高亮显示web页表格行的javascript代码
- grid中显示blobImage上传的图片 通过本案例,我们实现blobImage上传的图片在grid表格中的显示。 grid的cellRender方法渲染单元格显示图片,例: 1 2 3 4 5
- javaScript实现定时显示隐藏、BOM对象方法介绍、表单简单校验、表格换色、DOM、二级联动
- javascript实现table选中的行以指定颜色高亮显示的方法