在下面的代码中,我尝试在表格的单行中显示卡片中的三条记录。但是,它每行只显示一条记录。
另外,我需要将项目代码传递给模态弹出窗口,但无法理解如何执行此操作。尽管搜索,我无法完全澄清如何做到这一点。
我的完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/business-casual.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.container {
padding: 2px 16px;
}
input[type=text],
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto;
/* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%;
/* Could be more or less, depending on screen size */
}
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
</style>
</head>
<body>
<?php
$cnt=0;
$rslt = mysqli_query($conn,"SELECT Name,Size,Style FROM productinfo");
if(!$rslt)
{
die(mysqli_error($conn));
}
else
{
while($row = mysqli_fetch_assoc($rslt))
{
echo "<table width='100%'>";
if($cnt==0)
{
$cnt = $cnt + 1;
echo "<tr>
<td width='30%'>
<div class='card'>
<img src='upload/download.jpg' alt='Avatar' style='width:100%' >
<div class='container'>
<h4><b>".$row['Name']."</b></h4>
<p>".$row['Size']."</p>
</div>
</div>";
?>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Inquiry</button>
<?php
echo "</td>";
}
else
{
echo "<td width='30%'>
<div class='card'>
<img src='upload/"."download.jpg"."' alt='Avatar' style='width:100%' >
<div class='container'>
<h4><b>".$row['Name']."</b></h4>
<p>".$row['Size']."</p>
</div>
</div>
";
?>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Inquiry</button>
<?php
echo "</td>";
if($cnt==2)
{
$cnt=0;
echo "</tr>";
}
else
{
$cnt = $cnt + 1;
}
}
}
echo "</table>";
}
?>
<div id="id01" class="modal">
<div align="center">
<form action="ViewProd.php" method="post" role="form" class="modal-content animate" ><br/>
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="upload/download.jpg" alt="Avatar" class="avatar">
</div>
<table border="0px" cellpadding="1" cellspacing="0">
<tr >
<td width="25%">
Name
</td>
<td width="100%"> <!--<input type="text" tabindex="1" id="Icode" />-->
<input tabindex='1' accesskey='i' name='Nm' type='text' maxlength='200' id='Nm' width="100%" required="required"/>
</td>
</tr>
<tr >
<td width="25%">
Company Name
</td>
<td>
<input type="text" tabindex="1" name="Compnm" id="Compnm" border="0" required="required"/>
</td>
</tr>
<tr >
<td width="25%">
How do you Know about us?
</td>
<td>
<input type="text" tabindex="1" id="HowKnow" name="HowKnow" />
</td>
</tr>
<tr >
<td width="25%">
Email Address
</td>
<td>
<input type="text" tabindex="1" id="EmailAdd" name="EmailAdd" required="required"/>
</td>
</tr>
<tr >
<td width="25%">
Contact No.
</td>
<td>
<input type="text" tabindex="1" id="Phone" name="Phone" />
</td>
</tr>
<tr>
<td width="25%">
City
</td>
<td>
<input type="text" tabindex="1" id="City" name ="City"/>
</td>
</tr>
<tr >
<td width="25%">
Message
</td>
<td>
<input type="text" tabindex="1" id="Remarks" name="Remarks"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit">Submit</button>
</td>
</tr>
</table>
</form>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
答案 0 :(得分:0)
BTW,您的数据库连接在哪里?
总之...
1)在第一个循环中,在第一个条件内,将$cnt
递增1,然后在循环重复之前的下面条件下,else
也将递增$cnt
。我也使你的代码更小,但显示相同。
echo '<table width="100%">';
while($row = mysqli_fetch_assoc($rslt)){
if($cnt == 0){
echo '<tr>';
}
echo ' <td width="30%">
<div class="card">
<img src="upload/download.jpg" alt="Avatar" style="width:100%" >
<div class="container">
<h4><b>'.$row['Name'].'</b></h4>
<p>'.$row['Size'].'</p>
</div>
</div>';
?>
<button class="view-data" data-artid="<?=($row['id'])?>" onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Inquiry</button>
<?php
echo '</td>';
if($cnt == 2){
$cnt = 0;
echo '</tr>';
} else {
$cnt = $cnt + 1;
}
}
echo '</table>';
2)你的第二个问题需要更多的工作。您需要使用Ajax。
首先,让我们分配一个class
属性并将每个数据的id
设置为每个相应的按钮,您将注意到项目#1上的代码。您还必须在查询中指明id
列(假设您将其命名为id
,只需将其替换为正确的列):
$rslt = mysqli_query($conn,"SELECT id, Name,Size,Style FROM productinfo");
然后让我们创建一个脚本,在点击按钮时会听取按钮:
$(document).on('click', '.view-data', function(){
var elem = $(this),
id = elem.attr('data-artid');
$.ajax({
method: 'POST',
url: 'getdata.php',
data: {'id' : id},
dataType: 'json',
success: function(result){
$("#Nm").val(result.Name);
$("#Compnm").val(result.CompanyName); /** REPLACE NECESSARY COLUMN NAME **/
/** DO THE REST HERE WITH THEIR RESPECTIVE COLUMN NAME **/
}
});
});
我们必须创建getdata.php
文件,您将在上面的脚本中注意到这一点。这是我们将获得所点击按钮的相应数据的地方。
<?php
/*** INCLUDE YOUR DB CONNECTION HERE ***/
$stmt = $conn->prepare("SELECT * FROM productinfo WHERE id = ?");
$stmt->bind_param("i", $_POST['id']);
$stmt->execute();
$meta = $stmt->result_metadata();
while ($field = $meta->fetch_field()) {
$params[] = &$row[$field->name];
}
call_user_func_array(array($stmt, 'bind_result'), $params);
while ($stmt->fetch()) {
foreach($row as $key => $val) {
$productinfo[$key] = $val;
}
}
$stmt->close();
echo json_encode($productinfo); /** WE WILL THROW THIS DATA BACK TO THE AJAX REQUEST **/
?>
请注意您的控制台日志,以便在测试时查找错误。