使用JS替换HTML文本时仅首行生效、类名选择器失效问题求助

你遇到的两个异常，对应三类明确的代码问题：

• 循环渲染时给每一行的<td>绑定了重复的id='Activity'：DOM规范要求页面内id必须全局唯一，getElementById只会返回第一个匹配到的元素，这是原逻辑只能修改第一行内容的核心原因
• 切换到getElementsByClassName后操作逻辑有误：这个API返回的是包含所有匹配元素的类数组集合，不是单个DOM节点，直接对集合做字符串替换、innerHTML赋值不会触发任何页面变更
• 原样式逻辑和需求不匹配：你写的替换样式是蓝色，但实际需求是将所有Monday文本设为红色

1. 调整PHP渲染代码 #

删除循环中重复的id属性，仅保留统一的类名：

if ($result->num_rows > 0) {
echo "<table><tr><th>Assessor</th><th>Activity</th></tr>";
while($row = $result->fetch_assoc()) {
    echo "<tr><td>" . $row['first_name']. "</td><td class='Activity'>" . $row['Activity']. "</td></tr>";
}
echo "</table>";
} else {
echo "0 results";
}

2. 调整JavaScript逻辑 #

遍历所有匹配类名的单元格，逐个执行文本替换：

function changeSubStringColorT() {
    // 获取所有带Activity类的单元格
    const activityCells = document.getElementsByClassName("Activity");
    // 遍历集合内的每个独立单元格执行操作
    for (const cell of activityCells) {
        const originalContent = cell.innerHTML;
        // 全局匹配单元格内所有出现的Monday，替换为红色样式
        const replacedContent = originalContent.replaceAll("Monday", "<span style='color:red; font-weight:bold'>Monday</span>");
        cell.innerHTML = replacedContent;
    }
}

注意：需要等PHP渲染的表格DOM完全加载完成后再调用这个函数，否则会因为找不到DOM元素导致逻辑失效，可以将函数绑定到页面加载完成事件上触发执行。

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