Fatal编程技术网
  • css/
  • Css 选择并传递要在弹出窗口中显示的表格结果

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

css json ajax

Css 选择并传递要在弹出窗口中显示的表格结果,css,json,ajax,popup,popupwindow,Css,Json,Ajax,Popup,Popupwindow,我在td中放置了一个弹出触发器，因为我将表中的一些数据传输到了弹出窗口中。但是，我无法从表中获取详细信息，因为我将主弹出窗口放置在while循环之外，因为弹出窗口显示了多次，而不是仅显示一个窗口。如何将表格结果传递到弹出窗口 $result = mysqli_query($conn, $sql); while($row = mysqli_fetch_assoc($result)) { $k=1; ?> <td> <a

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

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

$result=mysqli\u查询（$conn，$sql）；
while（$row=mysqli\u fetch\u assoc（$result））{
$k=1；
?>






设备信息
员工编号：


名字：

中间名：

姓氏：

均衡器说明：

说明：

品牌：

标签号：

序列号：

型号：

IP地址：

发布日期：

均衡状态：

均衡条件：

购买日期：

年龄：


价格：

地点：

备注：

票面金额：< BR> BR>
更新
将此设备分配给员工
情商历史
jQuery（文档）.ready（函数（$）{
//打开弹出窗口
$（'popup trigger'）。在（'click'，函数（事件）{
event.preventDefault（）；
$（'.popup'）.addClass（'is-visible'）；
});
//关闭弹出窗口
$（'.popup'）。在（'click'，函数（事件）{
if（$（event.target）.is（'.popup close'）|$（event.target）.is（'.popup'））
) {
event.preventDefault（）；
$（this.removeClass（'is-visible'）；
}
});
//单击esc键盘按钮时关闭弹出窗口
$（文档）.keyup（函数（事件）{
if（event.which=='27'）{
$（'.popup'）.removeClass（'is-visible'）；
}
});
});

更新

我终于找到了答案。我将模态的显示和表结果的传递分离开来。我使用bootstrap来显示模态。下面的脚本只是将表结果传递到弹出式模态中。这是工作代码

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

什么类型的弹出窗口？？更多信息？？弹出窗口外的表格包含设备及其信息的列表。但是，列的数量太多，这就是为什么我将一些信息传输到弹出窗口。弹出窗口显示设备的所有信息。它显示添加的信息。我创建了一个足够了（引导框架）。看一看，但是我如何将表格结果传递给弹出窗口？弹出窗口中的信息包含来自表格的信息*请参见图片。当用户单击查看按钮调用ajax以获取设备信息时。将设备信息置于模式中。像这样放置一个自定义属性：eqid like this
，然后更改
var eqid=$（this）。数据（'eq_inv_id'）；
to
var eqid=$（this）.attr（'eqid'）；
我分离了显示模式和调用按钮值的脚本。请查看更新。我认为您的问题是
button.eqid
。看这个我删除了这个
onclick=“showDetails（this）”
。使用jquery选择
HTMLA
，每行的class
info
如下
$（'.info'）。单击
。我终于找到了答案。我只是把它放在触发器按钮内：value=”“onclick=“foggydestails（this）”。要从按钮获取值，我使用了以下命令：var invId=details.value；感谢您的帮助。请参阅我的更新答案。

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