如何打印msqli获取数组特定次数的选项卡内容？

时间：2023-01-13 03:38:40

So what am I trying to do is print tab content from a mysqli_fetch_array three times in one column, then move into a second column, and then the third column.

那么我想要做的是在一列中从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>

and the php

和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>
';
}

This is what am I trying to achieve

这就是我想要实现的目标

如何打印msqli获取数组特定次数的选项卡内容？

2 个解决方案

#1

2  

Try the following(In your PHP file):

尝试以下（在您的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>';

And in your HTML:

在你的HTML中：

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

This will store posts for each column in array as values, and then it uses implode() to convert them to html string, while concatenating the html tags in it. And adds prefix and postfix div tag.

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

#2

1  

Your Php Code Like This, Where While Loop on Only First Div and then its display dynamic:

你的Php代码就像这样，Where While Loop on Only First Div然后它的显示动态：

Working Demo: http://phpfiddle.org/main/code/4msw-ep80

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

Note: i m Using Array For Data Display in while loop.

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

Output Like This:

像这样的输出：

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

#1

2  

Try the following(In your PHP file):

尝试以下（在您的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>';

And in your HTML:

在你的HTML中：

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

This will store posts for each column in array as values, and then it uses implode() to convert them to html string, while concatenating the html tags in it. And adds prefix and postfix div tag.

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

#2

1  

Your Php Code Like This, Where While Loop on Only First Div and then its display dynamic:

你的Php代码就像这样，Where While Loop on Only First Div然后它的显示动态：

Working Demo: http://phpfiddle.org/main/code/4msw-ep80

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

Note: i m Using Array For Data Display in while loop.

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

Output Like This:

像这样的输出：

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

标签：

相关文章