如何在JavaScript遍历表格的循环中访问<a>标签并修改链接样式

要实现需求推荐通过添加CSS类的方式实现，因为链接的:visited、:hover等状态属于CSS伪类，无法通过JS设置的内联样式直接生效，用类规则统一控制更简单高效：

1. 先添加CSS样式规则 #

/* 匹配封禁行下所有a标签的所有状态，统一设为红色 */
.banned-row a,
.banned-row a:visited,
.banned-row a:hover,
.banned-row a:active {
    color: red !important;
    /* 如果原有链接样式优先级不高，可以去掉!important */
}

2. 修改你的JavaScript代码 #

var table = document.getElementById("steamtable");

window.onload = function() {
    // i从1开始跳过表头行，避免处理不需要的表头
    for (var i = 1, row; row = table.rows[i]; i++) {
        // 加trim避免单元格内有多余空格导致匹配失败
        if (row.cells[2].innerText.trim() === "yes") {
            // 保留你原有的单元格颜色修改逻辑
            row.cells[1].style.color = 'red';
            row.cells[2].style.color = 'red';
            row.cells[3].style.color = 'red';
            // 给当前行加封禁类，自动应用上面写好的链接样式
            row.classList.add('banned-row');

            // 如果你需要单独获取a标签做其他操作，可以用以下方式
            // 方式1：获取第一个单元格内的a标签
            var steamLink = row.cells[0].querySelector('a');
            if(steamLink) {
                // 此处可对a标签做其他自定义操作，比如加提示、修改属性等
            }
            // 方式2：如果要获取当前行所有a标签，可以用
            // var allLinks = row.querySelectorAll('a');
            // 遍历allLinks即可处理每一个a标签
        }
    }
}

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