将 td 悬停在 while 循环中时如何获取特定 ID

Question

当悬停特定的 td 时，我应该得到一个唯一的 timecard_id_overtime，但我总是得到 while 循环中的最后一个 id。 我尝试使用 id 而不是 class 但这也不起作用。 非常感谢。

<?php include "../db_connection302.php" ; ?>
<?php

         echo"<tr>" ;
         echo"<th class='leave-heading'>Particular </th>" ;
         echo"</tr>" ;


         // GENERATING ALL PENDING ATTENDANCE FOR APPROVAL 
         $query  = "SELECT * FROM ".$_SESSION['$company_code']."_tms WHERE  status = 'Pending' AND (particular = 'Log In' || particular = 'Log Out' || particular = 'Log In/Out' || particular = 'OB' || particular = 'Offsetting' ) ";
         $result_approval = mysqli_query($connection302,$query) or die(mysql_error());
         while($row_approval = mysqli_fetch_array($result_approval))  { 

         echo "<tr>" ;
         echo "<td class='reason'>".$timecard_id_overtime = $row_approval['timecard_id']."</td>" ;
         echo "</tr>" ;

             }

?>  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>


     var timecard_id = '<?php  echo $timecard_id_overtime  ; ?>' ;   


     $(document).ready(function() {


             $('.reason').hover(function() {

                 alert(timecard_id) ;


             });



         });



 </script>

Answer 1

在您的while循环中，您将在循环的每次迭代中覆盖相同的值$timecard_id_overtime ，因此它始终是循环完成时的最后一个值。

$timecard_id_overtime的值每次都会被覆盖。

//first iteration
//$timecard_id_overtime is set to 1

//second iteration
//$timecard_id_overtime is set to 2

//third iteration
//$timecard_id_overtime is set to 3

...等等。

实现目标的一种方法是为每个循环设置带有<td>的 id，以便正确的 id 与正确的元素相关联。 您可以将该 id 设置为<td>元素的属性，而不是 PHP 变量。 然后 JQuery 可以轻松获得该值。

...
PHP
...
 while($row_approval = mysqli_fetch_array($result_approval))  { 

     echo "<tr>" ;
     echo "<td class='reason' timecard_id='".$row_approval['timecard_id']."'></td>" ;
     echo "</tr>" ;

         }
...
Javascript
...
 $(document).ready(function() {

         $('.reason').hover(function() {
             alert($(this).attr('timecard_id')) ;
         });
     });
...
...