Как добавить эффект мерцания, чтобы завершить строку таблицы с помощью jquery? - PullRequest
Новая
       7

Как добавить эффект мерцания, чтобы завершить строку таблицы с помощью jquery?

0 голосов
/ 28 сентября 2019

У меня есть структура таблицы, как показано ниже, я использую переменную 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>

1 Ответ

2 голосов
/ 28 сентября 2019

Лучше использовать массив для табличных данных,

Я использовал это в приведенных ниже кодах и обрабатывал в цикле: 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...