我在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>
更新
我无法通过组合模式显示并从按钮获取设备ID值来弹出模式,因此我在脚本中将两者分开。一个将弹出模态,另一个将从按钮获取值。模态的显示已经可以正常工作,但是在模态或弹出窗口中均未输出错误消息或数据库中的任何数据。这是我的代码:
$result = mysqli_query($conn, $sql);
while($row = mysqli_fetch_assoc($result)) {
?>
<td>
<a href="#0" id="info" class="info popup-trigger"
onclick="showDetails(this)" eqid="<?php echo $row['eq_inv_id']; ?>"
title="info">View</a>
</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>
<div 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>EQ NO.:</label><strong><span id="eq_inv_id"></span>
</strong><br>
<label>EMPL. NO.:</label><strong><span id=""></span></strong><br>
<label>FIRST NAME:</label><strong><span id=""></span></strong><br>
<label>MIDDLE NAME:</label><strong><span id=""></span></strong><br>
<label>BRAND:</label><strong><span id=""></span></strong><br>
<label>TAG NO.:</label><strong><span id=""></span></strong><br>
<label>SERIAL NO.:</label><strong><span id=""></span></strong><br>
<label>MODEL NO:</label><strong><span id=""></span></strong><br>
<label>IP ADDRESS:</label><strong><span id=""></span></strong><br>
<label>DATE ISSUED:</label><strong><span id=""></span></strong><br>
<label>EQ STATE:</label><strong><span id=""></span></strong><br>
<label>EQ CONDITION:</label><strong><span id=""></span></strong><br>
<label>DATE PURCHASED:</label><strong><span id=""></span></strong><br>
<label>AGE:</label><br><strong><span id=""></span></strong><BR>
<label>PRICE:</label><strong><span id=""></span></strong><br>
<label>LOCATION:</label><strong><span id=""></span></strong><br>
<label>REMARKS:</label><strong><span id=""></span></strong><br>
<label>PAR NO.:</label><br><strong><span id=""></span></strong><BR>
<button class="">UPDATE</button>
<button class="">Assign this equipment to an employee</button>
<button class="">EQ HISTORY</button>
</div>
</div>
脚本
<script type='text/javascript'>
jQuery(document).ready(function(){
function showDetails(button) {
var invId = button.eqid;
//AJAX call to get specific equipment data
$.ajax({
url: "test.php",
method: "GET",
data: {"invId": invId},
success: function(response) {
// Parsing the JSON string to javascript object
var equipment = JSON.parse(response);
//Displaying in proper field
$("#eq_inv_id").text(equipment.eq_inv_id);
}
});
}
//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>
test.php
<html>
<head>
</head>
<?php
include "header.php";
$a=$_POST['eqid'];
?>
</body>
</html>