Méthode JavaScript pour mettre en évidence les lignes du tableau grâce aux compétences proxy_javascript d'événement-js tutoriel-php.cn

Méthode JavaScript pour mettre en évidence les lignes du tableau grâce aux compétences proxy_javascript d'événement

WBOY

Libérer： 2016-05-16 15:57:25

original

1246 Les gens l'ont consulté

L'exemple de cet article décrit comment JavaScript utilise le proxy d'événement pour mettre en évidence les lignes du tableau. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :

<!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>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.