JavaScript事件绑定：多元素交互的正确实践（避免ID重复）

// ... 部分代码省略 ...
while ($res2=mysqli_fetch_assoc($result2)) {
    echo "<tr>";
    // ... 其他<td>元素 ...
    // 错误的做法：为所有按钮使用相同的ID
    echo "<td><a href=\"#\" id=\"myId\" class=\"button\">View</a></td>";
    echo "</tr>"; // 注意：原始代码中<tr>闭合标签位置有误，应在循环内部
}
// ... 部分代码省略 ...

document.getElementById('myId').addEventListener("click", function () {
    document.querySelector('.bg-modal').style.display = "flex";
});

<table>
    <thead>
        <tr>
            <th align="center">ID</th>
            <th align="center">Project Name</th>
            <th align="center">Due Date</th>
            <th align="center">Sub Date</th>
            <th align="center">Comment</th>
            <th align="center">Status</th>
            <th align="center">Option</th>
        </tr>
    </thead>
    <tbody>
        <?php
        // 假设 $result2 是查询结果集
        // 示例数据（实际项目中应从数据库获取）
        $data = [
            ['project_id' => 1, 'project_name' => 'Project A', 'duedate' => '2023-01-01', 'subdate' => '2022-12-30', 'comment' => 'First project', 'status' => 'Completed'],
            ['project_id' => 2, 'project_name' => 'Project B', 'duedate' => '2023-02-15', 'subdate' => '2023-02-10', 'comment' => 'Second project', 'status' => 'In Progress'],
            ['project_id' => 3, 'project_name' => 'Project C', 'duedate' => '2023-03-20', 'subdate' => '', 'comment' => 'Third project', 'status' => 'Pending']
        ];

        // 模拟 mysqli_fetch_assoc 循环
        foreach ($data as $res2) {
            echo "<tr>";
            echo "<td>" . htmlspecialchars($res2['project_id']) . "</td>";
            echo "<td>" . htmlspecialchars($res2['project_name']) . "</td>";
            echo "<td>" . htmlspecialchars($res2['duedate']) . "</td>";
            echo "<td>" . htmlspecialchars($res2['subdate']) . "</td>";
            echo "<td>\"" . htmlspecialchars($res2['comment']) . "\"</td>";
            echo "<td>" . htmlspecialchars($res2['status']) . "</td>";

            // 将 id 更改为 class，并添加 data-属性以便后续获取行数据（如果需要）
            echo "<td><a href=\"#\" class=\"view-button\" data-project-id=\"" . htmlspecialchars($res2['project_id']) . "\">View</a></td>";
            echo "</tr>";
        }
        ?>
    </tbody>
</table>

<!-- 假设这是您的模态框HTML结构 -->
<div class="bg-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); justify-content: center; align-items: center;">
    <div class="modal-content" style="background-color: white; padding: 20px; border-radius: 5px;">
        <h2>Project Details</h2>
        <p>This is the popup content for project ID: <span id="popup-project-id"></span></p>
        <button class="close-modal">Close</button>
    </div>
</div>

document.addEventListener('DOMContentLoaded', function() {
    // 获取所有带有 'view-button' 类的元素
    const viewButtons = document.querySelectorAll('.view-button');
    const bgModal = document.querySelector('.bg-modal');
    const popupProjectIdSpan = document.getElementById('popup-project-id'); // 获取显示项目ID的元素
    const closeModalButton = document.querySelector('.close-modal');

    // 遍历所有按钮，并为每个按钮添加点击事件监听器
    viewButtons.forEach(button => {
        button.addEventListener('click', function(event) {
            event.preventDefault(); // 阻止<a>标签的默认跳转行为

            // 显示模态框
            if (bgModal) {
                bgModal.style.display = "flex";
            }

            // 如果需要，获取并显示点击按钮对应行的项目ID
            const projectId = this.dataset.projectId; // 获取data-project-id属性的值
            if (popupProjectIdSpan && projectId) {
                popupProjectIdSpan.textContent = projectId;
            }

            // 可以在这里根据projectId发起Ajax请求获取更多详情并填充到模态框
            console.log("Clicked project ID:", projectId);
        });
    });

    // 为关闭按钮添加事件监听器
    if (closeModalButton) {
        closeModalButton.addEventListener('click', function() {
            if (bgModal) {
                bgModal.style.display = "none";
            }
        });
    }

    // 点击模态框背景关闭（可选）
    if (bgModal) {
        bgModal.addEventListener('click', function(event) {
            // 只有当点击事件的目标是bgModal本身时才关闭，避免点击内容区关闭
            if (event.target === bgModal) {
                bgModal.style.display = "none";
            }
        });
    }
});