如何将动态表格内的俱乐部三字代码文本替换为对应logo图片

下面提供两种可直接落地的实现方案，优先推荐兼容性更强、维护更简单的JS+CSS方案。

方案1：JS+CSS方案（推荐） #

第一步：添加logo控制样式 #

在你现有的<style>标签内加入以下代码，可自行调整尺寸适配你的表格：

.club-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  vertical-align: middle;
  margin: 0 4px;
}

第二步：添加替换逻辑代码 #

在你现有JS代码的末尾，也就是PBShowBlocks(blockdefs);之后加入以下代码：

// 请自行补全所有俱乐部的三字缩写和对应logo的本地存储地址映射
const clubLogoMap = {
  "ABC": "你的ABC俱乐部logo本地地址",
  "DEF": "你的DEF俱乐部logo本地地址",
  "GHI": "你的GHI俱乐部logo本地地址"
  // 按格式继续添加所有需要替换的俱乐部即可
};

// 监听动态内容加载，自动识别替换缩写
const observer = new MutationObserver(() => {
  // 匹配所有主场、客场列的单元格
  document.querySelectorAll('table td:nth-child(3), table td:nth-child(4)').forEach(cell => {
    const code = cell.textContent.trim();
    if (clubLogoMap[code]) {
      cell.innerHTML = `<img src="${clubLogoMap[code]}" alt="${code}" class="club-logo">`;
    }
  });
});

// 绑定两个动态加载的记分板容器
observer.observe(document.getElementById('block-main-men'), {childList: true, subtree: true});
observer.observe(document.getElementById('block-main-women'), {childList: true, subtree: true});

方案2：纯CSS方案（仅适合俱乐部数量少、不需要兼容老旧浏览器的场景） #

该方案不需要写JS逻辑，但依赖CSS新特性:has选择器，兼容性略差，直接在你的<style>标签内添加以下代码即可：

/* 统一设置俱乐部单元格样式 */
td:nth-child(3), td:nth-child(4) {
  font-size: 0;
  background-size: 32px 32px;
  background-repeat: no-repeat;
  background-position: center;
}
/* 逐个添加俱乐部匹配规则，替换对应地址和缩写 */
td:nth-child(3):has(:contains("ABC")), td:nth-child(4):has(:contains("ABC")) {
  background-image: url("ABC俱乐部logo地址");
}
td:nth-child(3):has(:contains("DEF")), td:nth-child(4):has(:contains("DEF")) {
  background-image: url("DEF俱乐部logo地址");
}
/* 按格式继续添加其他俱乐部规则 */

注意事项 #

• 所有logo资源建议存储在你自己的站点服务器内，避免资源失效
• 可自行调整样式中的尺寸参数适配你的表格布局
• 三字缩写需要和动态加载出来的文本完全一致，注意大小写、空格的匹配

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