How to add blink effect to complete table row using jquery?

Question

I have table structure like below, I am using PHP variable to store value, I want to add blink effect to complete row based on if the text contains in row is equal to PHP variable value then blink that row in green to some other color. I have tried below code but it only changes the background color of that cell only and not blinking effect to complete row. How to add blinking effect to complete row? Any help would be appreciated. Thanks in advance.

<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>[email protected]</td>
    <td>1 st, Mumbai, IN </td>    
    </tr>
<tr>
        <td>20016</td>
        <td class='grn'>Mr XYZ</td>
    <td>[email protected]</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>

Mohammadreza Yektamaram · Accepted Answer · 2019-09-28 16:47:11Z

2

It's better to use array for table data,

I used that, in below codes and handled in loop:

<html>
<head>
</head>
<title> Employee Data</title>

<?php

$empName = "Mr ABC";

$tableArray = array(
  [
    "id" => 20015,
    "name" => "Mr ABC",
    "email" => "[email protected]",
    "address" => "1 st, Mumbai, IN",
  ],
  [
    "id" => 20016,
    "name" => "Mr XYZ",
    "email" => "[email protected]",
    "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>

edited Sep 28, 2019 at 16:47

answered Sep 28, 2019 at 16:34

Mohammadreza Yektamaram

1,53021 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Mohammadreza Yektamaram Over a year ago

Your welcome, of course. I added red color on blinking text. @ssbits

Mohammadreza Yektamaram Over a year ago

If this has helped you, please mark as answer. @ssbits

ssbits Over a year ago

sure but..it worked on this sample, while implementing in script it not showing blinking effect ..though i am not getting any error..

Mohammadreza Yektamaram Over a year ago

Why you want to edit... Do you have another problem?

ssbits Over a year ago

i am not getting output as expected

|

Collectives™ on Stack Overflow

How to add blink effect to complete table row using jquery?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related