如何使用 jquery 添加闪烁效果以完成表格行？答案

【问题标题】：How to add blink effect to complete table row using jquery?如何使用 jquery 添加闪烁效果以完成表格行？
【发布时间】：2019-09-29 00:47:11
【问题描述】：

我有如下表结构，我使用 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>

【问题讨论】：

标签： javascript php jquery

【解决方案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>

【讨论】：

当然欢迎您。我在闪烁的文本上添加了 red 颜色。 @ssbits
如果对您有帮助，请标记为答案。 @ssbits
当然但是..它适用于这个示例，而在脚本中实现它没有显示闪烁效果..虽然我没有收到任何错误..
为什么要编辑...您还有其他问题吗？
我没有得到预期的输出