How to blink table row based on condition using jquery or php?

Question

i want to add blink effect to specific table row based on value contain in row is equal to value in php variable. for example if php variable value is 'ABC' then blink table row containing text 'ABC', dynamically.. i have added css code in head for blink.. but may be php variable is not passing in jquery in below code..how to add blink effect to complete row? any help would be appreciated. Thanks in advance..

<html>
<head>
<title> Blink Row </title>

<style>
.blink {
        color: #FF0000;
        animation: blinker 1s linear infinite;
}

@keyframes blinker {
        50% {
        opacity: 0;
        }
}
</style>


</head>

<?php

$varName = 'ABC';


echo '
    <table id="tb_id" class="table table-striped">
<thead>
    <tr bgcolor="#E6E6FA">
    <th>Name</th>
    <th>Email</th>
    <th>Address</th>        
    </tr>
</thead>';

foreach( $rows as $row ){

echo "
    <tr>
        <td class='grn'>{$row[0]}</td>
        <td>{$row[1]}</td>
    <td>{$row[2]}</td>
    </tr>";
    }
    echo '
    </table>';


?>

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        $('#tb_id td.grn').each(function(){
        var empName = '<?php echo $varName; ?>';
                if ($(this).text() == empName) {
                $(this).css('background-color','#080');
                }
        });
});
</script>

</html>

Rory McCrossan · Accepted Answer · 2019-09-29 10:08:02Z

2

Your logic works, you just need to add the blink class to the parent tr of each matching td, which can be achieved using .closest() and addClass():

$(document).ready(function() {
  var empName = 'abc';

  $('#tb_id td.grn').each(function() {
    if ($(this).text() == empName) {
      $(this).css('background-color', '#080').closest('tr').addClass('blink');
    }
  });
});

.blink {
  color: #FF0000;
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table id="tb_id" class="table table-striped">
  <thead>
    <tr bgcolor="#E6E6FA">
      <th>Name</th>
      <th>Email</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class='grn'>abc</td>
      <td>Email0</td>
      <td>Address0</td>
    </tr>
    <tr>
      <td class='grn'>def</td>
      <td>Email1</td>
      <td>Address1</td>
    </tr>
    <tr>
      <td class='grn'>abc</td>
      <td>Email2</td>
      <td>Address2</td>
    </tr>
  </tbody>
</table>

However it's worth noting that this can be simplified using the :contains selector:

$(document).ready(function() {
  var empName = 'abc';

  $('#tb_id td.grn:contains("' + empName + '")').closest('tr').addClass('blink');
});

.blink {
  color: #FF0000;
  animation: blinker 1s linear infinite;
}

.blink>td:nth-child(1) {
  background-color: #080;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table id="tb_id" class="table table-striped">
  <thead>
    <tr bgcolor="#E6E6FA">
      <th>Name</th>
      <th>Email</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class='grn'>abc</td>
      <td>Email0</td>
      <td>Address0</td>
    </tr>
    <tr>
      <td class='grn'>def</td>
      <td>Email1</td>
      <td>Address1</td>
    </tr>
    <tr>
      <td class='grn'>abc</td>
      <td>Email2</td>
      <td>Address2</td>
    </tr>
  </tbody>
</table>

answered Sep 29, 2019 at 10:08

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

4 Comments

Rory McCrossan Over a year ago

Your code already worked in that regard. I only hard coded the value in the example as PHP is not interpreted in snippets

ssbits Over a year ago

with hard coded value its working.. but after passing php variable its not working...

ssbits Over a year ago

please edit using without hard coded value and pass variable value.. how to pass it

ssbits Over a year ago

thank you ..finally it works .. when i use json_encode.. :)

Collectives™ on Stack Overflow

How to blink table row based on condition using jquery or php?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related