Kaedah JavaScript untuk menyerlahkan baris jadual melalui kemahiran proxy

Kaedah JavaScript untuk menyerlahkan baris jadual melalui kemahiran proxy_javascript acara

WBOY

Lepaskan： 2016-05-16 15:57:25

asal

1287 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara JavaScript menggunakan proksi acara untuk menyerlahkan baris jadual. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

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

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.