鼠标悬停时高亮显示表格行
Highlighting a table row on mouse hover
我正在javascript调用中创建一个表,并通过选择链接的页面上的iframe显示数据。当用户悬停在一行上时,我试图突出显示一个表行。我向表中添加了一个类,然后添加了后续的css代码,但在表出现的那一行出现了解析错误。关于如何清除它,有什么想法吗?
<!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>
除非有其他问题,否则以下样式规则:
.hoverTable tr:hover {
background-color: rgba(255, 255, 0, 1);
}
应该可以完美工作。
[ADDED]
我现在更了解这个问题了。
您需要对HTML中的引号进行转义,这样解析器就不会将它们误认为PHP引号。试试这个:
echo "<table class='"hoverTable'">";
或者您可以(简单地)在PHP中使用单引号,在HTML中使用双引号,如下所示:
echo '<table class="hoverTable">';
=====
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>
相关文章:
- SIMPLE Javascript代码,用于显示谷歌电子表格中单个字段的数据
- 如何在单击按钮时显示2行1列的表格
- 使用下拉选择菜单高亮显示一行表格单元格
- 谷歌表格注释时间线显示精确的值
- 仅显示 Google 表格中来自 api 调用的最新数据行
- 在 AngularJS 表格中添加的行上显示 3 秒的弹出窗口
- 单击按钮-jQuery/JavaScript时显示表格
- 如何使用 angularjs 以表格格式显示 parse.com 的查询结果
- 单击并用CTRL+C复制值时高亮显示html表格单元格
- 注册表格上显示用户名已经在使用,但它没有;不存在
- 格式为nnnnnnnn的字符串在电子表格中显示为日期或不正确
- 在表格最后一行(链接)中显示菜单,并在单击菜单项时显示模式窗口
- 显示表格数据的更多链接
- 如何在使用<显示:表格><显示:列>时使表格行可单击
- 在Google Scripts中使用JavaScript将信息传输到电子表格,但电子表格显示未定义
- HTML, CSS, JS -在表格显示中将文本区域与标签对齐
- 为什么我的表格显示了两次
- 谷歌应用程序脚本连接2个值从2列在电子表格-显示在列表框中
- 联系人表格显示成功信息,但没有;t发送电子邮件
- 将表格显示为弹出窗口/在HTML顶部