当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Highlighting a table row on mouse hover

问题描述:

I'm creating a table in a javascript call and displaying the data via an iframe on the page the link is selected. 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. 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>

网友答案:

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. Try this:

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

Or you can (simply) use single quotes in PHP and double quotes in HTML, like this:

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

=====

Example of CSS & HTML together:

.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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: