选择并传递要在弹出窗口中显示的 table 结果

Question

我在 td 中放置了一个弹出触发器，因为我将 table 的一些数据传输到弹出 window 中。但是，我无法从 table 中获取详细信息，因为我将主弹出窗口 window 放在了 while 循环之外，因为弹出窗口 window 显示了多次而不是只显示一个 window。如何将 table 结果传递给弹出窗口？

   $result = mysqli_query($conn, $sql);
   while($row = mysqli_fetch_assoc($result)) {
    $k=1;
  ?>
      <td>
          <a href="#0" id="info" class="info popup-trigger" 
      title="info">View</a>
      </td>
      <td style="font-size:16px;"><STRONG><?php echo $row['eqdesc']; 
       $eqid=$row['eq_inv_id'];?> 
      </STRONG></td>
      <td><?php echo $row['eq_inv_id']; ?></td>
      <td style="color:red; font-size:15px;"><strong><a href="timeline.php? 
        emp_no=<?php echo 
       $row['empl_no'];?>" style="color:inherit;"><?php echo 
       $row['empl_firstname']; ?></a></strong> 
       </td>
      <td style="color:red; font-size:15px;"><strong><a href="timeline.php? 
       emp_no=<?php echo 
       $row['empl_no'];?>" style="color:inherit;"><?php echo 
        $row['middlename']; ?></a></strong> 
        </td>
      <td style="color:red; font-size:15px;"><strong><a href="timeline.php? 
      emp_no=<?php echo 
          $row['empl_no'];?>" style="color:inherit;"><?php echo 
      $row['empl_lastname']; ?></a> 
      </strong></td>
      <td><?php echo $row['brand']; ?></td>
        <td><?php echo $row['serial_no']; ?></td>
        <td><?php echo $row['eq_state']; ?></td>
        <td><?php echo $row['eq_condition']; ?></td>
      <td><?php echo $row['curr_equip_loc']; ?></td>
      </tbody>
        <?php
        }
        ?>
      </table>
      </div>
      <div id="#0" class="popup" role="alert">
      <div class="popup-container">
      <a href="#0" class="popup-close img-replace">Close</a>
      <h2 class="modal-heading">EQUIPMENT INFORMATION</h2>
      <label>EMPL. NO.:<strong><?php echo $row['eq_inv_id'];?></strong> 
      </label><br>
      <label>FIRST NAME:</label><br>
      <label>MIDDLE NAME:</label><br>
      <label>LAST NAME:</label><br>
      <label>EQ DESCRIPTION:</label><br>
      <label>DESCRIPTION:</label><br>
      <label>BRAND:</label><br>
      <label>TAG NO.:</label><br>
      <label>SERIAL NO.:</label><br>
      <label>MODEL NO:</label><br>
      <label>IP ADDRESS:</label><br>
      <label>DATE ISSUED:</label><br>
      <label>EQ STATE:</label><br>
      <label>EQ CONDITION:</label><br>
      <label>DATE PURCHASED:</label><br>
      <label>AGE:</label><br><BR>
      <label>PRICE:</label><br>
      <label>LOCATION:</label><br>
      <label>REMARKS:</label><br>
      <label>PAR NO.:</label><br><BR>
      <button class="">UPDATE</button>
      <button class="">Assign this equipment to an employee</button>
      <button class="">EQ HISTORY</button>
      </div>
      </div>

      <script>
      jQuery(document).ready(function($){
      //open popup
        $('.popup-trigger').on('click', function(event){
       event.preventDefault();
        $('.popup').addClass('is-visible');
        });

       //close popup
       $('.popup').on('click', function(event){
      if( $(event.target).is('.popup-close') || $(event.target).is('.popup') 
      ) {
       event.preventDefault();
      $(this).removeClass('is-visible');
      }
      });
      //close popup when clicking the esc keyboard button
      $(document).keyup(function(event){
    if(event.which=='27'){
    $('.popup').removeClass('is-visible');
     }
    });
    });
    </script>

Answer 1

已更新

我终于明白了。我将模态的显示和 table 结果的传递分开了。我使用 bootstrap 来显示模式。下面的脚本只是将 table 结果传递给弹出模式。这是工作代码。

    $result = mysqli_query($conn, $sql);
    while($row = mysqli_fetch_assoc($result)) {
     ?>

      <td>
        <!-- Button trigger modal -->
       <button type="button" value="<?php echo $row['eq_inv_id'];?>" 
        onclick="foggyDetails(this)"  class="btn btn-primary" data- 
        toggle="modal" data-target="#exampleModalCenter">
      View EQ
       </button>
      </td>
      <td><?php echo $row['eq_inv_id']; ?></td>
      <td style="font-size:16px;"><STRONG><?php echo $row['eqdesc'];?> 
       </STRONG></td>
      <td style="color:red; font-size:15px;"><strong><a 
      href="timeline.php?emp_no=<?php echo $row['empl_no'];?>" 
       style="color:inherit;"><?php echo $row['empl_firstname']; ?></a> 
       </strong></td>
      <td style="color:red; font-size:15px;"><strong><a 
      href="timeline.php?emp_no=<?php echo $row['empl_no'];?>" 
       style="color:inherit;"><?php echo $row['middlename']; ?></a> 
        </strong></td>
      <td style="color:red; font-size:15px;"><strong><a 
       href="timeline.php?emp_no=<?php echo $row['empl_no'];?>" 
       style="color:inherit;"><?php echo $row['empl_lastname']; ?></a> 
       </strong></td>
      <td><?php echo $row['brand']; ?></td>
        <td><?php echo $row['serial_no']; ?></td>
        <td><?php echo $row['eq_state']; ?></td>
        <td><?php echo $row['eq_condition']; ?></td>
      <td><?php echo $row['curr_equip_loc']; ?></td>
     </tbody>
     <?php
      }
     ?>
       </table>
       </div>
       <!-- Modal -->
       <div class="modal fade" id="exampleModalCenter" tabindex="-1" 
       role="dialog" aria-labelledby="exampleModalCenterTitle" aria- 
      hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
       <div class="modal-content">
       <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLongTitle">EQ Information</h5>
    <button type="button" class="close" data-dismiss="modal" aria- 
      label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
  <label>Equipment ID:<strong><span id="foggy"></span></strong><br>
  <label>Description:<strong><span id="foggy2"></span></strong><br>
  <label>Brand:<strong><span id="foggy3"></span></strong>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data- 
     dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
     </div>
      </div>
      </div>
      </div>

脚本

     function foggyDetails(details){
        var invId = details.value;

       $.ajax({
           url: "test.php",
           method: "GET",
           data: {"invId": invId},
           success: function(response) {

             // Parsing the JSON string to javascript object
             var reu = JSON.parse(response);

             //Displaying in proper field
             $("#foggy").text(reu.eq_inv_id);
             $("#foggy2").text(reu.eqdesc);
             $("#foggy3").text(reu.brand);
           }
         });
       }

test.php

        <?php
        include('connect.php');

        $invId=$_GET['invId'];
        $sql="SELECT * FROM eq_inv WHERE eq_inv_id='$invId'";
        $result=mysqli_query($conn, $sql);

        $a=mysqli_fetch_object($result);
        echo json_encode($a);    //returning the json string
         ?>

选择并传递要在弹出窗口中显示的 table 结果

Selecting and passing the table result to be displayed in the pop-up

css

ajax

json

popup

popupwindow