PHP与JavaScript剩余时间计算：表格数据渲染异常问题求助

问题原因 #

你所有任务行的剩余时间列都用了同一个id="data_rem"，但HTML里id是唯一标识，document.getElementById()只会找到第一个匹配的元素。循环里每次都往这个元素追加内容，自然所有剩余时间都堆在第一行。

修复步骤 #

1. 修改PHP渲染代码

把每个剩余时间列的<td>改成带统一标识+自定义属性的结构，用class统一标记，同时用data-deadline存储当前行的截止日期，无需再维护额外的$dateRem数组：

<?php
include "db.php";
$sql = "SELECT * FROM `task`";
$result = mysqli_query($con, $sql) or die("query failed ");

$sr = 1;
while ($row = mysqli_fetch_assoc($result)) {
?>
<tr>
    <td><?= $sr++ ?></td>
    <td><?= $row['name']; ?></td>
    <!-- 用class替代重复id，通过自定义属性存截止日期 -->
    <td class="data_rem" data-deadline="<?= $row['deadline']; ?>"></td>
    <td><?= $row['created_date']; ?></td>
    <td><?= $row['task']; ?></td>
</tr>
<?php
}
?>

2. 修改JavaScript计算逻辑

遍历所有class="data_rem"的元素，逐个读取对应行的截止日期，计算剩余时间后填充到当前元素：

<script>
function calcRemainingTime() {
    // 获取所有剩余时间列的DOM元素
    const remElements = document.querySelectorAll('.data_rem');
    
    remElements.forEach(el => {
        // 从自定义属性中取出当前行的截止日期
        const deadline = el.dataset.deadline;
        if (!deadline) return;
        
        // 计算时间差（转换为秒级时间戳）
        const now = Math.floor(Date.now() / 1000);
        const deadlineTs = Math.floor(new Date(deadline).getTime() / 1000);
        const diff = deadlineTs - now;
        
        // 计算剩余天数并格式化
        let days = Math.floor(diff / 86400);
        let daysStr = days.toString();
        if (days < 10) {
            daysStr = "0" + daysStr;
        }
        if (days < 0) {
            daysStr = "00";
        }
        
        // 将结果填充到当前行的对应列
        el.textContent = `${daysStr} days left`;
    });
}

// 页面加载完成后执行计算
calcRemainingTime();
// 如需实时更新剩余时间，可开启定时器
// setInterval(calcRemainingTime, 1000);
</script>

关键优化点 #

• 用class替代重复id，确保每个剩余时间列都能被单独定位
• 通过data-*自定义属性传递数据，避免维护额外数组，代码更简洁
• 遍历所有目标元素逐个处理，保证每行对应自己的剩余时间

内容的提问来源于stack exchange，提问作者adam