如何从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-->
所以我想做的是在一列中打印三次来自 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-->