Question

在下面的代码中，我尝试在表格的单行中显示卡片中的三条记录。但是，它每行只显示一条记录。

另外，我需要将项目代码传递给模态弹出窗口，但无法理解如何执行此操作。尽管搜索，我无法完全澄清如何做到这一点。

我的完整代码如下：

<!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">&times;</span>
      <img src="upload/download.jpg" alt="Avatar" class="avatar">
    </div>
 <table border="0px" cellpadding="1" cellspacing="0">
    <tr >
        <td width="25%">
            &nbsp;&nbsp;Name
         </td>            
     <td width="100%">&nbsp;&nbsp; <!--<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%">
        &nbsp;&nbsp;Company Name
    </td>
    <td>
    &nbsp;&nbsp; <input type="text" tabindex="1" name="Compnm" id="Compnm" border="0" required="required"/>
    </td>
</tr>
<tr >
    <td width="25%">
        &nbsp;&nbsp;How do you Know about us?
    </td>
    <td> 
        &nbsp;&nbsp; <input type="text" tabindex="1" id="HowKnow"  name="HowKnow" />
    </td>
</tr>
<tr >
    <td width="25%">
        &nbsp;&nbsp;Email Address  
    </td>
    <td> 
        &nbsp;&nbsp; <input type="text" tabindex="1" id="EmailAdd" name="EmailAdd" required="required"/>
    </td>
</tr>
<tr >
    <td width="25%">
        &nbsp;&nbsp;Contact No.  
    </td>
    <td> 
        &nbsp;&nbsp; <input type="text" tabindex="1" id="Phone" name="Phone" />
    </td>
</tr>
<tr>
    <td width="25%">
        &nbsp;&nbsp;City  
    </td>
    <td> 
        &nbsp;&nbsp; <input type="text" tabindex="1" id="City" name ="City"/>
    </td>
</tr>
<tr >
    <td width="25%">
        &nbsp;&nbsp;Message
    </td>
    <td> 
        &nbsp;&nbsp; <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>

Answer 1

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 **/

?>

请注意您的控制台日志，以便在测试时查找错误。

如何在一行表中显示3条记录

1 个答案: