使用PHP foreach循环创建Boostrap行，但将视图与PHP部分分开 - Create Boostrap rows with PHP foreach loop but separate view from PHP part

Create Boostrap rows with PHP foreach loop but separate view from PHP part

是否可以使用foreach循环为PHP中的每3列创建引导行，还可以将PHP代码与View部分分离。

这是我的代码

<?php include('connect.php'); 
$object = "";
$checkTables = $con -> prepare("SELECT * FROM available");
$checkTables -> execute();
$tables = $checkTables->fetchALL(PDO::FETCH_ASSOC);
$i = 0;
foreach($tables as $table):
    if($table['avail'] == 0) {
        $object .= '<div class="col-sm-4"><div class="table full"><p> 0 seats are avaiable.</p></div></div>';
    } else {
        $object .= '<div class="col-sm-4"><div id="table_'. $table['id'] .'" class="table"><p>' . $table['avail'] . ' seats are avaiable.</p></div></div>';
    }
    $i++;
endforeach;
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container-fluid text-center">
    <?php echo $object; ?>
</div><!-- End of container -->

<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

我想像这样将foreach循环放在我的文件顶部，并将html和php分开。

您可以在每次内部计数器模数3等于0:时添加新行

$object = '<div class="row">';
foreach($tables as $table):
    if($table['avail'] == 0) {
        $newObject = '<div class="col-sm-4"><div class="table full"><p> 0 seats are avaiable.</p></div></div>';
    } else {
        $newObject = '<div class="col-sm-4"><div id="table_'. $table['id'] .'" class="table"><p>' . $table['avail'] . ' seats are avaiable.</p></div></div>';
    }
    $i++;
    if($i % 3 === 0) {
        // True every time 3 divides into $i evenly
        $newObject = $newObject . '</div><div class="row">';
    }
    $object .= $newObject;
endforeach;
$object .= '</div>';