如何将 mysql 数据显示为表 header，然后将与该结果相关的所有数据显示为 html 中的表数据

Question

I'm working on a venue programming system for festivals to update our current system of just using loads of spreadsheets. I'm trying to figure out a way to display a table that shows all subvenues related to a festival as table headings and then all timeslots related to that subvenue as table columns. I want it to look something like this at the end.

screenshot of current spreadsheet used:

The idea is that you will be able to click on one of the free timeslots, and open a modal to allocate a show to that slot or display shows already attached to it. Ideally each subvenue will be drag and dropped into order but these are problems for later.

So far I'm trying to use a loop to create a table with only 1 column. have an sql query return the header and then inside that return loop have another sql query that returns all of the timeslots, then close the first loop. but this is only displaying 1 table and not looping round to return the others.

Code is

<?php 
  //selects subvenue  
 $sql = "SELECT *
        FROM Subvenue S
        JOIN Venue V
            ON S.venueId = V.venueId
        JOIN festvenue FV
            ON V.venueId = FV.venueId
        WHERE FV.festId = $festId;";
      
$result = mysqli_query($conn, $sql);
if (!$result) die ("Database access failed");

$rows = $result->num_rows;

//starts loop to display subvenues
for ($j = 0 ; $j < $rows ; ++$j) {

$row = $result->fetch_array(MYSQLI_NUM);

$subvenueId = htmlspecialchars($row[0]);
$subvenueName = htmlspecialchars($row[2]);
    
echo <<<_END
        <table>
        <tr>
            <th id="$subvenueId">$subvenueName<th>
        </tr>
    _END;

 $sql = "SELECT * FROM TimeSlot 
 WHERE subVenId = $subvenueId 
 ORDER BY (start >= '05:00:00') desc, start;";

 $result = mysqli_query($conn, $sql);
 if (!$result) die ("Database access failed");

 $rows = $result->num_rows;
 for ($j = 0 ; $j < $rows ; ++$j) {
 $row = $result->fetch_array(MYSQLI_NUM);
        
 $timeId = htmlspecialchars($row[0]);
 $type = htmlspecialchars($row[3]);
 $start = htmlspecialchars($row[4]);
 $end = htmlspecialchars($row[5]);
 $length = htmlspecialchars($row[8]);
        
  echo <<<_END
   <tr id="$timeId" class="timeslot-time">
      <td class="$type-$length">$start - $end</td>
   </tr>
  _END;
  }
    echo "</table>";
  }

 ?>

The sample data I have is below

Subvenue Table
+----------+---------+------------------------+
| subVenId | venueId | subVenName             |
+----------+---------+------------------------+
|        1 |       2 | Subvenue 1             |
|        2 |       2 | subvenue 2             |
+----------+---------+------------------------+

timeslot Table
+--------+--------+----------+-------+----------+----------+--------+
| timeId | festId | subVenId | type  | start    | end      | length |
+--------+--------+----------+-------+----------+----------+--------+
|      1 |     11 |        1 | show  | 12:00:00 | 13:00:00 |     60 |
|      2 |     11 |        1 | show  | 13:30:00 | 14:30:00 |     60 |
|      3 |     11 |        1 | break | 13:00:00 | 13:30:00 |     30 |
|      4 |     11 |        1 | break | 14:30:00 | 15:00:00 |     30 |
|      5 |     11 |        1 | show  | 15:00:00 | 16:00:00 |     60 |
|      6 |     11 |        2 | show  | 16:30:00 | 17:30:00 |     60 |
|      7 |     11 |        2 | show  | 18:00:00 | 19:00:00 |     60 |
|      8 |     11 |        2 | show  | 19:30:00 | 20:30:00 |     60 |
|      9 |     11 |        1 | show  | 21:00:00 | 22:00:00 |     60 |
|     10 |     11 |        2 | show  | 22:30:00 | 23:30:00 |     60 |
+--------+--------+----------+-------+----------+----------+--------+

I'm not even sure a table it the best thing for this or would lists or something else be better?

At the end I want it to display

+-------------------+.  +-------------------+
| subvenue 1        |   | subvenue 2        |
+-------------------+.  +-------------------+
| 12:00:00-13:00:00 |   | 16:30:00-17:30:00 |
| 13:30:00-14:30:00 |   | 18:00:00-19:00:00 |
| 13:00:00-13:30:00 |   | 19:30:00-20:30:00 |
| 14:30:00-15:00:00 |   | 22:30:00-23:30:00 |
| 15:00:00-16:00:00 |.  +-------------------+
| 21:00:00-22:00:00 |
+-------------------+
etc

Answer 1

I've managed to figure this out. I decided to output a series of lists instead of using a table.

Apart from that my main fix was instead of using the same $sql and $stmt variables in the mySQL query I used $subSql and $subStmt for the second query.

require_once "header.php";

$festId = mysqli_real_escape_string($conn, $_GET["festival_Id"]);

?>

    <div id="programming" class="tabcontent">
    <h2 >Programming</h2><br>  
    
<?php  

     //gets the subvenue and starts first loop

$sql = "SELECT *
    FROM Subvenue S
    JOIN Venue V
        ON S.venueId = V.venueId
    JOIN festvenue FV
        ON V.venueId = FV.venueId
    WHERE FV.festId = ?;";
$stmt = mysqli_stmt_init($conn);
if(!mysqli_stmt_prepare($stmt, $sql)) {
  header("location: ../festival.php?error=sqlerror&festival_Id".$festId);
  exit();
}

else {
   mysqli_stmt_bind_param($stmt, "s", $festId);
   mysqli_stmt_execute($stmt);
   $result = $stmt->get_result();
   $rows = $result->num_rows;

   for ($j = 0 ; $j < $rows ; ++$j)
   {
       $row = $result->fetch_array(MYSQLI_NUM);
       $subVenueId = htmlspecialchars($row[0]);
       $subVenueName = htmlspecialchars($row[2]);
    
   echo <<<_END
       <div id="$subVenueId" class="programme">
         <ul>
            <li class="programme-heading">$subVenueName</li>
              <ul>
    _END;

        //select all timeslots with that subvenue   
        $subSql = "SELECT * FROM TimeSlot 
                WHERE subVenId = ?
                ORDER BY (start >= '05:00:00') desc, start;";
        $subStmt = mysqli_stmt_init($conn);
        if(!mysqli_stmt_prepare($subStmt, $subSql)) {
            header("location: ../festival.php? 
            error=sqlerror&festival_Id".$festId);
            exit();
        }
        else {
           mysqli_stmt_bind_param($subStmt, "s", $subVenueId);
           mysqli_stmt_execute($subStmt);
           $subResult = $subStmt->get_result();
                
           while ($row = mysqli_fetch_assoc($subResult)) {
              $timeId = htmlspecialchars($row['timeId']);
              $type = htmlspecialchars($row['type']);
              $start = htmlspecialchars($row['start']);
              $end = htmlspecialchars($row['end']);
              $length = htmlspecialchars($row['length']);
                    
        echo <<<_END
              <li id="[$timeId" class="$type-$length">$start - $end</li>
        _END;][1]
                }
            }
            echo "</ul></ul></div>";
        }
}

That looks exactly how I wanted it. in the initial question