Markieren Sie Tabellenzeile mit onMouseOver und onMouseOut mit externer JavaScript-Datei

Ich muss eine Tabellenzeile markieren (ohne den Tabellenkopf), aber ich kann CSS-Hover nicht verwenden. Ich muss JavaScript onMouseOver und onMouseOut Ereignisse verwenden. Das JavaScript muss in einer externen Datei enthalten sein.Markieren Sie Tabellenzeile mit onMouseOver und onMouseOut mit externer JavaScript-Datei

Ich verwende bereits die externe JavaScript-Datei, um das Datum in der Fußzeile zu drucken. Aus irgendeinem Grund rufen onMouseOver und onMouseOut nicht "trackTableHighlight" oder "highlightTableRow" auf. Was mache ich falsch?

Hier ist test.html:

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="test.css"> 
<meta charset="utf-8"/> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Test</title> 
<script src="test.js"></script> 
</head> 
<body> 
    <div id="wrapper"> 
     <header> 
      <h1>Test</h1> 
     </header> 

     <nav> 
      <ul> 
       <li><a href="">Home</a></li> 
      </ul> 
     </nav> 

     <div class="main"> 
      <div class="middle-content"> 
       <br> 
       <table class="stripe_table"> 
        <tr> 
         <th></th> 
         <th></th>  
         <th></th> 
         <th></th> 
        </tr> 
        <tbody onMouseOver="trackTableHighlight(event, '#8888FF')" onMouseOut="highlightTableRow(0)"> 
         <tr> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
         </tr> 
         <tr> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
         </tr> 
         <tr> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
      <footer> 
       <p> 
        Today is: 
        <script>printDate();</script> 
       </p> 
      </footer> 
     </div> 
    </div> 
</body> 
</html>

Hier test.js ist:

function printDate() 
{ 
    document.write(Date()); 
} 

function trackTableHighlight(mEvent, highlightColor) 
{ 
    if (!mEvent) 
    mEvent=window.event; 

    // Internet Explorer 
    if (mEvent.srcElement) 
    { 
    highlightTableRow(mEvent.srcElement, highlightColor); 
    } 
    // Netscape and Firefox 
    else if (mEvent.target) 
    { 
    highlightTableRow(mEvent.target, highlightColor);  
    } 
} 

function highlightTableRow(myElement, highlightColor) 
{ 
    var i=0; 
    // Restore color of the previously highlighted row 
    for (i; i<savedStateCount; i++) 
    { 
    restoreBackgroundStyle(savedStates[i]); 
    } 
    savedStateCount=0; 

    while (myElement && 
    ((myElement.tagName && myElement.tagName!="TR") || !myElement.tagName)) 
    { 
    myElement=myElement.parentNode; 
    } 

    if (!myElement || (myElement && myElement.id && myElement.id=="header")) 
    return; 

    if (myElement) 
    { 
    var tableRow=myElement; 

    if (tableRow) 
    { 
     savedStates[savedStateCount]=saveBackgroundStyle(tableRow); 
     savedStateCount++; 
    } 

    var tableCell=findNode(myElement, "TD"); 

    var i=0; 
    while (tableCell) 
    { 
     if (tableCell.tagName=="TD") 
     { 
     if (!tableCell.style) 
     { 
      tableCell.style={}; 
     } 
     else 
     { 
      savedStates[savedStateCount]=saveBackgroundStyle(tableCell); 
      savedStateCount++; 
     } 
     tableCell.style["backgroundColor"]=highlightColor; 

     tableCell.style.cursor='default'; 
     i++; 
     } 
     tableCell=tableCell.nextSibling; 
    } 
    } 
}

Hier ist test.css:

html { 
    height: 100%; 
} 

body { 
    font-family: Arial, Helvetica, sans-serif; 
    background: linear-gradient(to bottom, #FFFFFF, #4F6D93) no-repeat; 
    color: #666666; 
    height: 100%; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
} 

header { 
    background-color: #000033; 
    color: #FFFFFF; 
    height: 60px; 
    text-align: center; 
    padding-top: 15px; 
} 

nav { 
    font-weight: bold; 
    padding: 20px; 
    float: left; 
    width: 160px; 
} 

nav ul { 
    list-style-type:none; 
    margin: 0px; 
    padding-left: 0px; 
    font-size: 1.2em; 
} 

h1 { 
    font-family: "Times New Roman", Georgia, Serif; 
    margin-top: 0px; 
} 

footer { 
    font-size: 75%; 
    font-style: italic; 
    text-align: center; 
    font-family: "Times New Roman", Georgia, Serif; 
    padding: 20px; 
} 

#wrapper { 
    margin: auto; 
    width: 80%; 
    background-color: #90C7E3; 
    min-width: 960px; 
    max-width: 2048px; 
    box-shadow: 3px 3px 3px #333333; 
    position: relative; 
} 

.middle-content { 
    padding-left: 1%; 
    padding-right: 1%; 
    padding-bottom: 1%; 
} 

.main { 
    background-color: #FFFFFF; 
    border: 3px solid white; 
    margin-left: 190px; 
    padding-left: 30px; 
    margin-bottom: 5%; 
} 

table { 
    margin-left:auto; 
    margin-right:auto; 
    border-collapse: collapse; 
    width: 80%; 
    text-align: center; 
} 

table, th, td { 
    border: 2px solid #90C7E3; 
} 

th, td { 
    padding: 15px; 
} 

th { 
    background: #000033; 
    color: white; 
} 

td:nth-child(2) { 
    text-align: left; 
}

Quelle

2016-04-21 bicycle_guy

Sie können wirklich sneeky sein und verwenden Sie einfach die Javascript-Datei, um die CSS anhängen. https://jsfiddle.net/tmLvzur3/1/ – Neoaptt

2 Probleme damit: 1. Just das Einfügen des Javascript von JSFiddle in meine .js-Datei scheint nicht zu funktionieren. Was ist erforderlich, damit der JSFiddle-Code in einer tatsächlichen JS-Datei funktioniert? 2. Dies verwendet nur Javascript, um CSS-Hover durchzuführen. Ich muss dies mit onMouseOver und onMouseOut tun. –

Hier ist ein kleiner Test in jsfiddle : https://jsfiddle.net/a2Lxqxqe/2/ (Ich bin mir nicht sicher über Probleme mit der Browserkompatibilität, aber Sie können sehen, dass es in Chrome funktioniert):

document.addEventListener("DOMContentLoaded", function(event) { 
    var tr = document.getElementsByTagName("tr"); 

    for (var i = 0; i < tr.length; i++) { 
     tr[i].addEventListener("mouseover", function() { 
      this.style.backgroundColor = "#8888FF"; 
     }); 

     tr[i].addEventListener("mouseout", function() { 
      this.style.backgroundColor = "transparent"; 
     }); 
    } 
}); 


function printDate() { 
    document.write(Date()); 
}

Statt addEventListener können Sie attachEvent() verwenden, wenn Sie Unterstützung benötigen für: IE8 und unten und/oder Opera 6 und unten. Hier ist eine kleine Referenz dazu: http://www.w3schools.com/jsref/met_document_addeventlistener.asp

Ich wickelte den Code in document.addEventListener("DOMContentLoaded", function(event){ ... }), so dass der Code ausgeführt wird, nachdem das DOM geladen ist, wenn Sie nicht einen Fehler beim Schweben erhalten.

Quelle

2016-04-21 16:16:00

Dies funktioniert wie vorgesehen. Vielen Dank! –

Ich wünschte, ich hätte genug Ansehen, um dich zu belohnen. –

Schön zu hören, dass es für dich funktioniert hat! ... hehehehe, mach dir keine Sorgen. Zu wissen, dass es dir geholfen hat, ist genug :) –

Markieren Sie Tabellenzeile mit onMouseOver und onMouseOut mit externer JavaScript-Datei

Antwort

Verwandte Themen