Question

我需要突出显示一个表行（排除表头），但我不能使用CSS悬停。我必须使用JavaScript onMouseOver和onMouseOut事件。 JavaScript必须包含在外部文件中。

我已经在使用外部JavaScript文件在页脚中打印日期。出于某种原因onMouseOver和onMouseOut没有调用＆＃34; trackTableHighlight＆＃34;或＆＃34; highlightTableRow＆＃34;。我做错了什么？

这是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>

这是test.js：

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;
    }
  }
}

这是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;
}

Answer 1

以下是jsfiddle中的一个小测试：https://jsfiddle.net/a2Lxqxqe/2/（我不确定浏览器兼容性问题，但您可以看到它在Chrome中运行良好）：

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());
}

如果您需要支持：IE8及以下版本和/或Opera 6及以下版本，则可以使用addEventListener代替attachEvent()。以下是对此的一点参考：http://www.w3schools.com/jsref/met_document_addeventlistener.asp

我将代码包装在document.addEventListener("DOMContentLoaded", function(event){ ... })中，以便代码在加载DOM后执行，如果不是，则在悬停时会出现错误。

使用onMouseOver和onMouseOut使用外部JavaScript文件

1 个答案: