自行车预订系统：实现借出车辆单元格颜色动态修改

步骤1：提取已借出的自行车编号 #

首先从数据库中收集当前处于借出状态的自行车编号（若需过滤已到期记录，后续可补充时间判断逻辑），存入数组以便后续判断：

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "mtb";

$rentedBikes = [];

try {
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    // 查询所有非空的自行车编号字段
    $stmt = $conn->prepare("SELECT bike1, bike2, bike3, bike4, bike5, bike6 FROM mtbtable");
    $stmt->execute();
    $result = $stmt->fetchAll(PDO::FETCH_ASSOC);

    // 遍历结果，收集所有已借出的编号
    foreach ($result as $row) {
        foreach ($row as $bikeNum) {
            if (!empty(trim($bikeNum))) {
                $rentedBikes[] = trim($bikeNum);
            }
        }
    }
} catch(PDOException $e) {
    echo "Error: " . $e->getMessage();
}

步骤2：复用表格渲染类，减少冗余代码 #

删除重复定义的TableRows2类，直接复用TableRows类：

class TableRows extends RecursiveIteratorIterator {
    function __construct($it) {
        parent::__construct($it, self::LEAVES_ONLY);
    }

    function current() {
        return "<td style='width: 150px; border: 1px solid black;'>" . parent::current(). "</td>";
    }

    function beginChildren() {
        echo "<tr>";
    }

    function endChildren() {
        echo "</tr>" . "\n";
    }
}

步骤3：动态生成自行车状态表格 #

在生成最后一个显示自行车编号的表格时，判断每个编号是否在已借出数组中，动态设置单元格背景色：

echo "<table style='border: solid 1px black;'>";
echo "<tr><th>Number of bike</th></tr>";
// 遍历1-5号自行车
for ($i = 1; $i <= 5; $i++) {
    $color = in_array((string)$i, $rentedBikes) ? 'red' : 'green';
    echo "<tr><td style='width: 150px; border: 1px solid black; background-color: {$color};'>{$i}</td></tr>";
}
echo "</table>";

完整优化后的代码 #

整合所有部分，去掉重复的数据库连接和冗余代码：

<!DOCTYPE html>
<html>
<head>
    <title>Bike Waiver</title>
    <style>
        /* 统一样式，便于维护 */
        .data-table {
            border: solid 1px black;
            border-collapse: collapse;
        }
        .data-table th, .data-table td {
            width: 150px;
            border: 1px solid black;
            padding: 6px;
        }
        .status-table {
            border: solid 1px black;
            border-collapse: collapse;
        }
        .status-table th, .status-table td {
            width: 150px;
            border: 1px solid black;
            padding: 6px;
        }
    </style>
</head>
<body>
<br>

<?php
// 定义通用表格渲染类
class TableRows extends RecursiveIteratorIterator {
    function __construct($it) {
        parent::__construct($it, self::LEAVES_ONLY);
    }

    function current() {
        return "<td>" . parent::current(). "</td>";
    }

    function beginChildren() {
        echo "<tr>";
    }

    function endChildren() {
        echo "</tr>" . "\n";
    }
}

// 数据库配置
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "mtb";

// 收集已借出自行车编号
$rentedBikes = [];
try {
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
    $stmt = $conn->prepare("SELECT bike1, bike2, bike3, bike4, bike5, bike6 FROM mtbtable");
    $stmt->execute();
    $result = $stmt->fetchAll(PDO::FETCH_ASSOC);

    foreach ($result as $row) {
        foreach ($row as $bikeNum) {
            if (!empty(trim($bikeNum))) {
                $rentedBikes[] = trim($bikeNum);
            }
        }
    }
} catch(PDOException $e) {
    echo "Error: " . $e->getMessage();
}

// 渲染第一个数据表格
echo "<table class='data-table'>";
echo "<tr>
        <th>bike1</th> 
        <th>bike2</th> 
        <th>bike3</th> 
        <th>bike4</th> 
        <th>bike5</th> 
        <th>bike6</th>
        <th>Firstname</th> 
        <th>Lastname</th> 
        <th>hotel</th> 
        <th>roomNumber</th> 
        <th>email</th> 
        <th>startDate</th>
        <th>startTime</th>
        <th>returnDate</th>
        <th>endTime</th>
        <th>returnPlace</th>
        <th>numberBike</th> 
        <th>numberHelmet</th> 
        <th>numberPumps</th> 
      </tr>";

try {
    $stmt = $conn->prepare("SELECT bike1, bike2, bike3, bike4, bike5, bike6, first_name, last_name, hotel, roomNumber, email, startDate, startTime, returnDate, endTime, returnPlace, numberBike, numberHelmet, numberPumps FROM mtbtable");
    $stmt->execute();
    $result = $stmt->setFetchMode(PDO::FETCH_ASSOC);

    foreach(new TableRows(new RecursiveArrayIterator($stmt->fetchAll())) as $k=>$v) {
        echo $v;
    }
} catch(PDOException $e) {
    echo "Error: " . $e->getMessage();
}
echo "</table>";

echo "<br>";

// 渲染第二个数据表格
echo "<table class='data-table'>";
echo "<tr>
        <th>bike1</th> 
        <th>bike2</th> 
        <th>bike3</th> 
        <th>bike4</th> 
        <th>bike5</th> 
        <th>bike6</th>
        <th>Firstname</th> 
        <th>Lastname</th> 
        <th>hotel</th> 
        <th>roomNumber</th> 
        <th>email</th> 
        <th>startDate</th>
        <th>startTime</th>
        <th>returnDate</th>
        <th>endTime</th>
        <th>returnPlace</th>
        <th>numberBike</th> 
        <th>numberHelmet</th> 
        <th>numberPumps</th>  
      </tr>";

try {
    $stmt = $conn->prepare("SELECT bike1, bike2, bike3, bike4, bike5, bike6, first_name, last_name, hotel, roomNumber, email, startDate, startTime, returnDate, endTime, returnPlace, numberBike, numberHelmet, numberPumps FROM mtbtable");
    $stmt->execute();
    $result = $stmt->setFetchMode(PDO::FETCH_ASSOC);

    foreach(new TableRows(new RecursiveArrayIterator($stmt->fetchAll())) as $k=>$v) {
        echo $v;
    }
} catch(PDOException $e) {
    echo "Error: " . $e->getMessage();
}
echo "</table>";

$conn = null;

echo "<br>";

// 渲染自行车状态表格
echo "<table class='status-table'>";
echo "<tr><th>Number of bike</th></tr>";
for ($i = 1; $i <= 5; $i++) {
    $color = in_array((string)$i, $rentedBikes) ? 'red' : 'green';
    echo "<tr><td style='background-color: {$color};'>{$i}</td></tr>";
}
echo "</table>";
?>

</body>
</html>

补充说明 #

• 若需过滤已到期的借出记录，可修改查询语句加入时间判断：

  $stmt = $conn->prepare("SELECT bike1, bike2, bike3, bike4, bike5, bike6 FROM mtbtable WHERE CONCAT(returnDate, ' ', endTime) > NOW()");
  

• 统一使用<style>标签管理样式，替代内联样式，提升可维护性。

内容的提问来源于stack exchange，提问作者Maarten Van Dijk