如何从mysqli fetch数组中打印出特定次数的tab内容?

How to print out tab content from msqli fetch array specific number of times?

所以我想做的是在一列中打印三次来自 mysqli_fetch_array 的选项卡内容,然后移动到第二列,然后是第三列。

<div class="d-flex justify-content-center">

    <!-- First column -->

    <div class="d-flex flex-column">

        <?php echo $tab_content; ?>

    </div>

    <!-- Second column -->

    <div class="d-flex flex-column">

    </div>

    <!-- Third column -->

    <div class="d-flex flex-column">

    </div>
</div>

和php

while ($row = mysqli_fetch_array($result)) {

$tab_content .= '
<div class="card" style="width: 20rem;">

<img class="card-img-top" src="">
<div class="card-body">
<h4 class="card-title">'.$row['job_name'].'</h4>
<h6 class="card-subtitle mb-2">'.$row['price'].'</h6>
<p class="card-text">'.$row['job_desc'].'</p>
<a href="#" class="btn btn-primary">Contact</a>
</div>
</div>
';
}

这就是我要实现的目标

尝试以下操作(在您的 PHP 文件中):

$i=1;
$tabs = [];
$tab_content = null;
while ($row = mysqli_fetch_array($result)) {
$tab_content .= '
<div class="card" style="width: 20rem;">

<img class="card-img-top" src="">
<div class="card-body">
<h4 class="card-title">'.$row['job_name'].'</h4>
<h6 class="card-subtitle mb-2">'.$row['price'].'</h6>
<p class="card-text">'.$row['job_desc'].'</p>
<a href="#" class="btn btn-primary">Contact</a>
</div>
</div>
';
if($i % 3 === 0)
{
    $tabs[] = $tab_content;
    $tab_content = null;
}
$i++;
}

$tab_content = '<div class="d-flex flex-column">' . implode('</div><div class="d-flex flex-column">', $tabs) . '</div>';

在你的 HTML 中:

<div class="d-flex justify-content-center">
        <?php echo $tab_content; ?>
</div>

这会将每个列的帖子存储为值,然后使用 implode() 将它们转换为 html 字符串,同时连接其中的 html 标签。并添加前缀和后缀 div 标记。

你的 Php 代码是这样的,While 循环只先 Div 然后显示动态:

工作演示:http://phpfiddle.org/main/code/4msw-ep80

注意:我在 while 循环中使用数组显示数据。

<?php

$a = array(
  array(
    'job' => 'job 1',
    'price' => '500',
    'job_desc' => 'Bla Bla Bla',
  ),
  array(
    'job' => 'job 2',
    'price' => '1000',
    'job_desc' => 'Bla Bla Bla',
  ),
  array(
    'job' => 'job 3',
    'price' => '2000',
    'job_desc' => 'Bla Bla Bla',
  ),

  array(
    'job' => 'job 4',
    'price' => '500',
    'job_desc' => 'Bla Bla Bla',
  ),
  array(
    'job' => 'job 5',
    'price' => '1000',
    'job_desc' => 'Bla Bla Bla',
  ),
  array(
    'job' => 'job 6',
    'price' => '2000',
    'job_desc' => 'Bla Bla Bla',
  ),
  array(
    'job' => 'job 7',
    'price' => '500',
    'job_desc' => 'Bla Bla Bla',
  ),
  array(
    'job' => 'job 8',
    'price' => '1000',
    'job_desc' => 'Bla Bla Bla',
  ),
  array(
    'job' => 'job 9',
    'price' => '2000',
    'job_desc' => 'Bla Bla Bla',
  )

);

?>


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="margin-top:50px;">

<div class="container">        
<div class="row">
  <div class="col-sm-12">
    <div class="row">

<?php
foreach($a as $value) {
?>

      <div class="col-md-4 col-sm-4">
        <div class="well">
          <h4 class="text-danger"><span class="label label-danger pull-right"><?php echo $value['price']; ?></span> <?php echo $value['job']; ?> 
          <br><br>
          <span> <p> <?php echo $value['job_desc']; ?></p></span>
          <button class="btn btn-primary"> Connect </button>
          </h4>
        </div>
      </div>

<?php
}
?>


    </div><!--/row-->    
  </div><!--/col-12-->
</div><!--/row-->
</div><!--/container-->

</body>
</html>

输出如下:


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="margin-top:50px;">

<div class="container">        
<div class="row">
  <div class="col-sm-12">
    <div class="row">
      <div class="col-md-4 col-sm-4">
        <div class="well">
          <h4 class="text-danger"><span class="label label-danger pull-right"> 250kn </span> Job Name 1  
          <br><br>
          <span> <p> Bla Bla Bla Bla Bla Bla Bla Bla  Bla Bla</p></span>
          <button class="btn btn-primary"> Connect </button>
          </h4>
        </div>
      </div>
      <div class="col-md-4 col-sm-4">
        <div class="well">
          <h4 class="text-success"><span class="label label-success pull-right"> 250kn </span> Job Name 2
          <br><br>
          <span> <p> Bla Bla Bla Bla Bla Bla Bla Bla  Bla Bla</p></span>
          <button class="btn btn-primary"> Connect </button>
          </h4>
        </div>
      </div>
      <div class="col-md-4 col-sm-4">
        <div class="well">
          <h4 class="text-primary"><span class="label label-primary pull-right"> 250kn </span> Job Name 3
          <br><br>
          <span> <p> Bla Bla Bla Bla Bla Bla Bla Bla  Bla Bla</p></span>
          <button class="btn btn-primary"> Connect </button>
          </h4>
        </div>
      </div>
      
      
      
      
      <!-- Start Row 2 -->
      
       <div class="col-sm-12">
    <div class="row">
      <div class="col-md-4 col-sm-4">
        <div class="well">
          <h4 class="text-danger"><span class="label label-danger pull-right"> 250kn </span> Job Name 4  
          <br><br>
          <span> <p> Bla Bla Bla Bla Bla Bla Bla Bla  Bla Bla</p></span>
          <button class="btn btn-primary"> Connect </button>
          </h4>
        </div>
      </div>
      <div class="col-md-4 col-sm-4">
        <div class="well">
          <h4 class="text-success"><span class="label label-success pull-right"> 250kn </span> Job Name 5
          <br><br>
          <span> <p> Bla Bla Bla Bla Bla Bla Bla Bla  Bla Bla</p></span>
          <button class="btn btn-primary"> Connect </button>
          </h4>
        </div>
      </div>
      <div class="col-md-4 col-sm-4">
        <div class="well">
          <h4 class="text-primary"><span class="label label-primary pull-right"> 250kn </span> Job Name 6
          <br><br>
          <span> <p> Bla Bla Bla Bla Bla Bla Bla Bla  Bla Bla</p></span>
          <button class="btn btn-primary"> Connect </button>
          </h4>
        </div>
      </div>
      
      
      
      
      <!-- End Row 2 -->
      
    </div><!--/row-->    
  </div><!--/col-12-->
</div><!--/row-->
</div><!--/container-->