php - 使用 jquery、php、mysql 动态弹出

Question

<script type="text/javascript" src="jquerynew.js"></script>
<script>

    $(document).ready(function() 
    {       
       $('#wings').click(function(event) 
       {
           loadPopupBox();
           $('body').css('background','#333');        
       });

       $('#popupclose').click(function(event) 
       {            
           unloadPopupBox();
           $('body').css('background','white');
       });

       function loadPopupBox() 
       {  
          $('#popupbox').fadeIn("slow");
       }        

       function unloadPopupBox() 
       {
          $('#popupbox').fadeOut("normal");       
       }  
       $("#popupbox").hide();
    });

</script>

<style>
 table { border-collapse:collapse; margin-left:370px; margin-top:20px; padding:10px; font-family:Trebuchet MS; min-width:530px; }
 table th,td { border:1px solid #8AC007; }

 #popupbox {  position:fixed; _position:absolute; /* hack for internet explorer 6 */ background:#FFFFFF; left:472px; top:150px; 
           border:2px solid lightgray; padding:15px;  z-index:100px; font-size:15px;  -moz-box-shadow: 0 0 5px lightgray; 
           -webkit-box-shadow: 0 0 5px lightgray; box-shadow: 0 0 5px lightgray; display:none; }

 #popupclose { border:0px solid lightgray; color:#6FA5E2; font-family:verdana; font-weight:bold; line-height:15px; float:right;
               cursor:pointer;  text-decoration:none; }
</style>

<?php

  $con = mysql_connect("localhost","root","");  
  mysql_select_db("popupsql",$con);

  $users = mysql_query("SELECT u.id, u.username, u.firstname, u.lastname FROM user u");  
  $rows = array();
  while($row = mysql_fetch_assoc($users))
  $rows[] = $row;

  echo '<table>
             <tr style="background:#8AC007;color:#8A4C25;font-size:15px;">
                <th style="padding:10px;">Firstname</th>
                <th style="padding:10px;">Lastname</th>
                <th style="padding:10px;">Status</th>
             </tr>';
  foreach($rows as $row)
  { 
     echo '<tr>
               <td style="padding:5px;">'.$row['firstname'].'</td>
               <td style="padding:5px;">'.$row['lastname'].'</td>
               <td style="padding:5px;text-align:center;">
                 <a id="wings">view status</a>
                 <div class="popupbox">
                 <div style="height:30px;"><img class="popupclose" src="close.png" style="float:right;"></img></div>';
                 $grades = mysql_query('SELECT u.firstname, u.lastname,u.email,ggh.finalgrade FROM grade_grades_history ggh, user u WHERE 
                                        u.id = ggh.userid AND u.id = '.$userid.'');   

                 $rows = array();
                 while($row = mysql_fetch_array($grades));
                 $rows[] = $row;
                 foreach($rows as $row)
                 {
                   echo $row['email'];
                 }
             echo '</div>
               </td>
           </tr>';
  }
  echo '</table>';     
?>

这是我动态显示 jQuery 弹出窗口的代码。, 弹出窗口仅针对第一行打开，但我需要为所有用户打开一个弹出窗口，即，当我单击第一个用户查看状态时，弹出窗口应显示他/她的适当状态。 谁能建议我。

Answer 1

不要在行上使用 id，而是将其作为一个类。您使用 id 作为选择器来分配单击处理程序，该处理程序仅适用于第一个匹配的元素。但是，如果您将它们更改为类并选择该类，它将应用到所有这些元素。