問題

我想根據行中包含的值向特定錶行新增閃爍效果等於在php變數中的值.例如,如果php變數值為’ABC’,那麼動態地閃爍包含文字’ABC’的錶行..我已經為瞬間添加了css程式碼..但可能是php變數不會在下面的程式碼中傳遞jquery ..如何為完成行新增閃爍效果?任何幫助將不勝感激.提前致謝..

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

  最佳答案

您的邏輯工作,您只需要將 blink 類新增到每個匹配 td 的父 tr,這可以透過 .closest()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> 

但值得注意的是,這可以使用:contains選擇器進行簡化:

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

  相同標籤的其他問題

javascriptphpjquery