php，我如何在 10 行和 10 列中呈现 100 个元素-6ren

php，我如何在 10 行和 10 列中呈现 100 个元素

转载作者：行者123 更新时间：2023-11-28 00:42:01

所以我有一个包含 100 个座位或有时 150 个座位的数组，我想渲染里面的元素但有 10 行，而不是 1 行和 100 个元素，我该怎么做？

  <div class="container">
    <ol>
<-- ROW 1 START--> 
        <li class="row">
            <ol class="seats" type="A">
                <li class="seat">
                    <input type="checkbox" id="A1" />
                    <label for="A1">A1</label>
                </li>
            </ol>
        </li>
<-- ROW 1 End--> 
<-- ROW 2 START--> 
        <li class="row">
            <ol class="seats" type="A">
                <li class="seat">
                    <input type="checkbox" id="A1" />
                    <label for="A1">B1</label>
                </li>
            </ol>
        </li>
<-- ROW 2 END--> 
    </ol>
</div>

这是php代码

<?php
require "includes\header.php";
require "includes\database.inc.php";

if (!isset($_SESSION['id'])) {
    header("Location: login.php?error=not_login");
    exit();
}
// SELECT * FROM seats where branch_id = 1
$seats = $mysqli->query("SELECT * FROM seats where branch_id = 1") or die($mysqli->error);
?>

  <head>
    <link href="./css/seats.css" rel="stylesheet">
  </head>


  <div class="container">
    <ol>
        <li class="row row--1">
            <ol class="seats" type="A">
            <?php 
                $i=1;
                while ($row = mysqli_fetch_array($seats)) {
            ?>
                <li class="seat">
                    <input type="checkbox" id="A1" />
                    <label for="A1"><?php echo $row['row'].$row['number'] ?></label>
                </li>
                <?php } ?>
        <li>
    </ol>
</div>

但它给了我这个 UI，这是错误的，不是我想要的，当我检查 A3 时，它反而突出显示了 A1...

最佳答案

您可以结束有序列表并在每 10 项之后重新创建一个新列表。试试下面的代码，这可能会帮助您实现相同的目标:

<div class="container">
    <ol>
        <li class="row row--1">
            <ol class="seats" type="A">
            <?php 
                $i=1;
                while ($row = mysqli_fetch_array($seats)) {
            ?>
                    <li class="seat">
                        <input type="checkbox" id="A1" />
                        <label for="A1">A1</label>
                    </li>
            <?php if ($i%10 == 0) { ?>
                    </ol>
                    <ol class="seats" type="A">
            <?php }
                  $i++;
                }
            ?>
            </ol>
        </li>
    </ol>
</div>