SoFunction
Updated on 2025-03-01

JavaScript method to highlight table rows through event proxy

This article describes the method of JavaScript highlighting table rows through event proxy. Share it for your reference. The specific implementation method is as follows:

<!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: -->
<table  summary="highlight demo">
 <tr><td>Just one</td><td>.. no another</td></tr>
 <tr><td>Second</td><td>.. no another</td></tr>
 <tr ><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 (  )
 addEvent = function (elem, eventType, func) {
  (eventType, func, false);
 };
 else if (  )
 addEvent = function (elem, eventType, func) {
  ('on' + eventType, func);
 };
 addEvent(elem, eventType, func);
};
var delegateEvent = function (elem, childElems, eventType, func, args) {
 addEvent(elem, eventType, function (e) {
 var evt = e || ;
 var elem =  || ;
 if ( () == () ) {
  func(elem, args);
 }
 });
};
function highlightRows(obj, args) {
 if (args && ) {
  = ;
  = ;
 if ( &&  == "")
   = "Row " + ;
 } else {
  = "";
 if (("Row ") + 1)
   = "";
 }
}
function init() {
 delegateEvent(('thetable'), 'td', 'mouseover',
   highlightRows, {'colour': 'lightblue', 'over': true, 
   'index': true});
 delegateEvent(('thetable'), 'td', 'mouseout',
   highlightRows, {'over': false});
}
addEvent(window, 'load', init);
</script>
</body>
</html>

I hope this article will be helpful to everyone's JavaScript programming.