1. 首页
  2. 问答
  3. 如何在表格的单个行中显示3条记录

如何在表格的单个行中显示3条记录

2017-04-18 145 views
-1

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

此外，我需要将项目代码传递到模式弹出窗口，但无法理解如何做到这一点。尽管搜索，我不能完全澄清如何做到这一点。

我的完整代码如下：

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

来源

2017-04-18 Jain

+0

“productinfo”表的主键ID列是什么？ –

回答

0

BTW，哪里是你的数据库连接？

反正...

1）关于第一个循环中，第一个条件内，您可以通过一个递增$cnt，然后在下面的条件下重复循环之前，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 **/ 

?>

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

来源

2017-04-18 06:01:23

+0

产品详细信息将不会显示在模式弹出窗口中我需要根据该模式弹出窗口中选定的产品从用户那里获得一些输入并将其作为查询保存到mySql数据库中 – Jain

相关问题

 相关问题