如何使用jquery为完整的表格行添加闪烁效果？

Question

我有类似下面的表结构，我正在使用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>

Answer 1

对于表数据，最好使用数组，

我在下面的代码中使用了它，并在循环中进行了处理：

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