dojo小代码

RunSource

Using event delegation on an HTML table to highlight rows and columns.

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------

js代码：

require([
  'dojo/on',
  'dojo/dom-class', 'dojo/dom-attr', 'dojo/query', // note that dojo/query must be loaded for event delegation to work 'dojo/domReady!' ], function(on, domClass, domAttr, query) { var highlighter = { setCol: function(cellIdx, classStr, tbl) { var i = 0, len = tbl.rows.length; for (i; i < len; i++) { var cell = tbl.rows[i].cells[cellIdx]; if (cell && !domAttr.has(cell, 'colspan')) { // provided index might not be available and skip header //cells with colspan domClass.toggle(cell, classStr) } } }, highlightCol: function(cssQuery, classStr) { var self = this; query(cssQuery).on('td:mouseover, td:mouseout', function(evt) { self.setCol(this.cellIndex, classStr, evt.currentTarget); }); }, highlightRow: function(cssQuery, classStr) { // note: this could also just be set through css with pseudoclass hover query(cssQuery).on('tr:mouseover, tr:mouseout', function() { domClass.toggle(this, classStr); }); }, highlightBoth: function(cssQuery, classStrRow, classStrCol){ var self = this; query(cssQuery).on('td:mouseover, td:mouseout', function(evt) { var tbl = evt.currentTarget; var tr = evt.target.parentNode; var td = evt.target; self.setCol(td.cellIndex, classStrCol, tbl); domClass.toggle