我有如下所示的表结构，我使用 PHP 变量来存储值，我想根据行中包含的文本是否等于 PHP 变量值来添加闪烁效果来完成行，然后将该行以绿色闪烁到某个值其他颜色。我已经尝试过下面的代码，但它只更改该单元格的背景颜色，而不是完成行的闪烁效果。如何为整行添加闪烁效果？任何帮助，将不胜感激。提前致谢。
<html>
<head>
</head>
<title> Employee Data</title>
<?php
$empName = "Mr ABC";
?>
<table id="emp_data" class="table table-striped">
<thead>
<tr bgcolor="#E6E6FA">
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Address</th>
</tr>
</thead>
<tr>
<td>20015</td>
<td class='grn'>Mr ABC</td>
<td>abc123@gmail.com</td>
<td>1 st, Mumbai, IN </td>
</tr>
<tr>
<td>20016</td>
<td class='grn'>Mr XYZ</td>
<td>xyz123@gmail.com</td>
<td>1 st, Mumbai, IN </td>
</tr>
</table>
</html>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#emp_data td.grn').each(function(){
var empName = '<?php echo $empName; ?>';
if ($(this).text() == empName) {
$(this).css('background-color','#080');
}
});
});
</script>
最佳答案
表数据最好使用数组，
我在下面的代码中使用了它并在循环中处理:
<html>
<head>
</head>
<title> Employee Data</title>
<?php
$empName = "Mr ABC";
$tableArray = array(
[
"id" => 20015,
"name" => "Mr ABC",
"email" => "abc123@gmail.com",
"address" => "1 st, Mumbai, IN",
],
[
"id" => 20016,
"name" => "Mr XYZ",
"email" => "xyz123@gmail.com",
"address" => "1 st, Mumbai, IN",
]
);
?>
<table id="emp_data" class="table table-striped">
<thead>
<tr bgcolor="#E6E6FA">
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Address</th>
</tr>
</thead>
<?php
foreach( $tableArray as $row ) {
$blink = ( $row['name'] == $empName ) ? true : false;
?>
<tr class='<?= $blink ? "blink" : "" ?>'>
<td><?= $row['id']; ?></td>
<td class='grn'><?= $row['name']; ?></td>
<td><?= $row['email']; ?></td>
<td><?= $row['address']; ?></td>
</tr>
<?php } ?>
</table>
<style>
.blink {
color: #FF0000;
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
</style>
</html>
关于javascript - 如何使用 jquery 添加闪烁效果来完成表格行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58148135/