使用 php 制作时间表页面

Question

我正在尝试制作一个日程安排页面，其中有一个名为约会的 sql 表，其中包含（id、姓名、日期、时间）。我想在一个基于 html/css 的表中重新组合该表中的数据，将同一日期的所有记录重新组合，如下图所示

然后，我希望此表重复自身，但包含新日期的新数据。 我有另一个问题是空的下拉列表，我试图在其中回显所有日期，并且用户选择一个日期来查看时间表。 正在尝试编辑的代码在此链接中：

See the last part of the tutorial

我有这段代码：

    <?php
$sql="SELECT * FROM clinic.appoint";
$result = mysqli_query($con, $sql) or die($sql."<br/><br/>".mysql_error());
$rows=mysqli_fetch_array($result)
?>
<div class="container">
<table>
          <thead>
            <tr>
                            Schedule               

              <th scope="row">
                    <form action="" method="submit">
                    <select name="Date" required class="form-control" id="Date">
    <option value="">Please Select Date</option>
    <?php $sql2="SELECT * FROM clinic.appoint";
    $result2 = mysqli_query($con, $sql2) or die($sql2."<br/><br/>".mysql_error());
    while($rows2=mysqli_fetch_array($result2)){?>
    <option value="<?php echo $rows2['date'] ?>"><?php echo $rows2['date'] ?></option>
    <?php } ?>
</select>
<input type="submit" name="submit" value="Select Date" />
</form>
              </th>
              <td class="schedule-offset" colspan="2">
              </td>
            </tr>
          </thead>
          <tbody>
          <?php if(isset($_POST['submit'])){ ?>
          <?php if(isset($_POST['Date'])){ ?>

          <?php
          $selectOpt = $_POST['Date'];
$sql="SELECT * FROM clinic.appoint WHERE date=".$rows2['date'];
$result = mysqli_query($con, $sql) or die($sql."<br/><br/>".mysql_error());
$rows=mysqli_fetch_array($result)
?>
            <tr>
              <th scope="row">
                          <?php while($rows=mysqli_fetch_array($result)){?>

                <?php echo $rows['time'] ?>
              </th>
              <td scope="row" id="scheduleDate">
                <?php echo $rows['name'] ?>
              </td>
              <td scope="row">
                <?php echo $rows['date'] ?>
              </td>
            </tr>
            <tr>
            <?php } ?>
            <?php }?>
            <?php }?>
              <th scope="row">
                <time datetime="14:00">2:00 PM</time>
              </th>
              <td>
                <a href="speakers.html#tessa-harmon">
                  <h4>Tessa Harmon</h4>
                  Crafty Coding: Generating Knitting Patterns
                </a>
              </td>
            </tr>
          </tbody>
        </table>
</div>
</body>
</html>

总结： 我想从下拉列表中选择一个日期，然后这个特定列表的所有数据都显示在这种类型的 html 表中。但我对它们都有问题（获取下拉列表，并将数据回显到这种类型的表中）。

Answer 1

1) 我想从下拉列表中选择一个日期

<select name="Date" required class="form-control" id="Date">
    <option value="">Please Select Date</option>
    <?php $sql="SELECT * FROM clinic.appoint";
    $result = mysqli_query($con, $sql) or die($sql."<br/><br/>".mysql_error());
    while($rows=mysqli_fetch_array($result)){?>
    <option value="<?php echo $rows['date'] ?>"><?php echo $rows['date'] ?></option>
    <?php } ?>
</select>

2) 然后这个特定列表的所有数据都显示在这种类型的 HTML 表格中。

您需要jQuery Change function 和Ajax method 来获取数据并针对所选日期显示

$(document).ready(function(){
    $("#Date").change(function(){
            var seldate =$(this).val();
            $("#scheduleDate").html(seldate);
            var dataString = 'seldate='+ seldate;
                $.ajax({
                type: "POST",
                url: "getdata.php",
                data: dataString,
                cache: false,
                success: function(data) {
                    $("#Schedule").html(data);
                } 
            });
        });
});

创建getdata.php

<?php
    //Datebase Connection
    if($_POST['seldate']) {
        $selDate = $_POST['seldate'];
        $sql="SELECT * FROM clinic.appoint WHERE date='$selDate'";
        $result = mysqli_query($con, $sql) or die($sql."<br/><br/>".mysql_error());
        while($rows=mysqli_fetch_array($result)){
    ?>
    <tr>
        <td scope="row"><?php echo $rows['name'] ?></td>
        <td scope="row"><?php echo $rows['date'] ?></td>
    </tr>
<?php } } ?>

HTML 表格看起来像

<table>
    <thead>
    <tr>
        Schedule
        <th scope="row">
            //Date Select HERE
        </th>
        <td class="schedule-offset" colspan="2" id="scheduleDate"></td>
    </tr>
    </thead>
    <tbody id="Schedule">
    </tbody>
</table>