在鼠标悬停时突出显示表格行

Question

I'm creating a table in a javascript call and displaying the data via an iframe on the page the link is selected. 我正在用javascript调用创建一个表格，并通过iframe在选择链接的页面上显示数据。 I'm trying to highlight a table row as the user hovers over a row. 当用户将鼠标悬停在一行上时，我试图突出显示表格行。 I added a class to the table and then subsequent css code but I'm getting a parse error on the line where the table appears. 我向表中添加了一个类，然后向其后的CSS代码添加了一个类，但是在表出现的行上出现了解析错误。 Any ideas on how to clear it? 关于如何清除它的任何想法？

<!DOCTYPE HTML>
<html lang = "en">
  <head>
    <link rel="stylesheet" type="text/css" href="mystylesheet.css">
    <title>Tech Order Department.html</title>
    <meta charset = "UTF-8" />


</head>

<body>


    <h2>Completed Projects</h2>
<br>

<?php
$servername = "localhost";
$username = "xxx";
$password = "xxx";
$dbname = "xxx";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
     die("Connection failed: " . $conn->connect_error);
} 

//Set up and run my Query

$sql = "SELECT Project, Client, DateReceived, LastName, FinalReviewDate, DateDelivered, DateAccepted FROM Projects
              WHERE DateAccepted IS NOT NULL
              ORDER BY DateAccepted DESC";
$result = $conn->query($sql);

//Display results

if ($result->num_rows > 0) {
     echo "<table class="hoverTable"><tr><th>Client</th><th>Project</th><th>Point of Contact</th><th>Date Project Received</th><th>Final Review Date</th><th>Date Delivered</th><th>Date Accepted</th></tr>";
     // output data of each row
     while($row = $result->fetch_assoc()) {
         echo "<tr><td>" . $row["Client"]. "</td><td>" . $row["Project"]. "</td><td> " . $row["LastName"]. "</td><td> " . $row["DateReceived"]. "</td><td> " . $row["FinalReviewDate"]. "</td><td> " . $row["DateDelivered"]. "</td><td> " . $row["DateAccepted"]. "</td></tr>";
     }
     echo "</table>";
} else {
     echo "0 results";
}

$conn->close();
?> 

  </body>
</html>

Answer 1

Unless there's something else amiss, the following style rule: 除非有其他问题，否则遵循以下样式规则：

.hoverTable tr:hover {
background-color: rgba(255, 255, 0, 1);
}

should work perfectly. 应该工作完美。

[ADDED] [添加]

I understand the issue better now. 我现在对这个问题有了更好的了解。

You need to escape the quotes in your HTML, so the parser doesn't mistake them for PHP quotes. 您需要转义HTML中的引号，因此解析器不会将它们误认为PHP引号。 Try this: 尝试这个：

echo "<table class=\"hoverTable\">";

Or you can (simply) use single quotes in PHP and double quotes in HTML, like this: 或者，您可以（简单地）在PHP中使用单引号，在HTML中使用双引号，如下所示：

echo '<table class="hoverTable">';

===== =====

Example of CSS & HTML together: CSS和HTML的示例：

 .hoverTable tr:hover { background-color: rgba(255, 255, 0, 1); }

 <table class="hoverTable"> <tr> <th>Client</th> <th>Project</th> <th>Point of Contact</th> <th>Date Project Received</th> <th>Final Review Date</th> <th>Date Delivered</th> <th>Date Accepted</th> </tr> <tr> <td>Client1</td> <td>Project1</td> <td>LastName1</td> <td>DateReceived1</td> <td>FinalReviewDate1</td> <td>DateDelivered1</td> <td>DateAccepted1</td> </tr> <tr> <td>Client2</td> <td>Project2</td> <td>LastName2</td> <td>DateReceived2</td> <td>FinalReviewDate2</td> <td>DateDelivered2</td> <td>DateAccepted2</td> </tr> <tr> <td>Client3</td> <td>Project3</td> <td>LastName3</td> <td>DateReceived3</td> <td>FinalReviewDate3</td> <td>DateDelivered3</td> <td>DateAccepted3</td> </tr> <tr> <td>Client4</td> <td>Project4</td> <td>LastName4</td> <td>DateReceived4</td> <td>FinalReviewDate4</td> <td>DateDelivered4</td> <td>DateAccepted4</td> </tr> <tr> <td>Client5</td> <td>Project5</td> <td>LastName5</td> <td>DateReceived5</td> <td>FinalReviewDate5</td> <td>DateDelivered5</td> <td>DateAccepted5</td> </tr> </table>

在鼠标悬停时突出显示表格行

问题描述

1 个解决方案

解决方案1
1 2015-11-13 17:44:10

===== =====

在鼠标悬停时突出显示表格行

问题描述

1 个解决方案

解决方案1 1 2015-11-13 17:44:10

===== =====

解决方案1
1 2015-11-13 17:44:10