如何实现表格中通过同行复选框修改对应行文本颜色？

嘿，我来帮你捋捋问题出在哪，顺便给你改好代码～作为新手遇到这些小坑很正常，咱们一步步来拆解：

原代码里的几个关键问题： #

• 每次循环都输出<script>标签，会重复定义fun()函数，最后只有最后一次定义的函数生效，前面的都被覆盖了
• JS里直接用了PHP变量$var和$cbid，没有转成字符串，JS会把它们当成未定义的变量报错
• getElemeentById拼写错误，多了一个字母e，正确写法是getElementById
• 表格的闭合标签</table>放在了while循环内部，导致每循环一次就生成一个不完整的表格，HTML结构完全混乱
• 复选框的ID拼写错误：chechbox→checkbox

修正后的完整代码： #

<?php 
$var = 1; 
echo "<table>
        <tr>
            <th>Text</th>
            <th>Checkbox</th>
        </tr>"; 
while($var <= 3){ 
    $textId = "text-$var";
    $cbId = "checkbox-$var";
    echo "
        <tr>
            <td>
                <input type='text' id='$textId' value='$var'>
            </td>
            <td>
                <input type='checkbox' id='$cbId' onclick='toggleTextColor(\"$textId\")'>
            </td>
        </tr>"; 
    $var++; 
} 
echo "</table>";
?>
<script>
function toggleTextColor(textId){
    // 获取对应的文本框元素
    const textInput = document.getElementById(textId);
    // 获取当前点击的复选框（通过事件对象直接获取）
    const checkbox = event.target;
    // 根据勾选状态切换文本颜色
    textInput.style.color = checkbox.checked ? 'red' : '';
}
</script>

关键改进说明： #

• 把JS函数放在循环外面，只定义一次，避免重复定义导致的覆盖问题
• 给每个文本框和复选框生成唯一且清晰的ID（比如text-1、checkbox-1），方便对应关联
• 点击复选框时，直接把对应文本框的ID传给JS函数，不用依赖全局变量，逻辑更清晰
• 用event.target直接获取当前点击的复选框，不用再通过ID查找，更高效
• 修正了表格结构，确保整个表格只在循环外打开和闭合，符合HTML规范
• 用三元运算符简化了颜色切换逻辑，代码更简洁易读

你可以直接运行这段代码试试，勾选复选框时对应的文本就会变成红色，取消勾选就恢复默认颜色～

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