如何在Electron的HTML表格中为每个玩家添加统计数据行？

1. 整理玩家数据为数组格式 #

先把从.log文件提取到的玩家用户名整理成数组，确保能批量处理：

// 示例：从log提取后得到的玩家名数组
const playerNames = ["PlayerA", "PlayerB", "PlayerC"];

2. 批量获取玩家Bedwars统计数据 #

遍历玩家数组，调用Hypixel API批量获取数据，用Promise.all处理异步请求，避免单玩家请求的局限性：

async function fetchAllPlayerStats(playerNames) {
  const apiKey = "你的Hypixel API密钥";
  const statsPromises = playerNames.map(async (name) => {
    // 先通过用户名获取玩家UUID
    const uuidRes = await fetch(`https://api.mojang.com/users/profiles/minecraft/${name}`);
    const uuidData = await uuidRes.json();
    if (!uuidData.id) return null;

    // 获取Bedwars统计数据
    const statsRes = await fetch(`https://api.hypixel.net/player?key=${apiKey}&uuid=${uuidData.id}`);
    const statsData = await statsRes.json();
    if (!statsData.player?.stats?.Bedwars) return null;

    const bedwarsStats = statsData.player.stats.Bedwars;
    const wins = bedwarsStats.wins_bedwars || 0;
    const finalKills = bedwarsStats.final_kills_bedwars || 0;
    const finalDeaths = bedwarsStats.final_deaths_bedwars || 1; // 避免除以0报错
    const fkdr = (finalKills / finalDeaths).toFixed(2);

    return {
      username: name,
      wins,
      finalKills,
      fkdr
    };
  });

  // 过滤掉获取失败的玩家数据
  return (await Promise.all(statsPromises)).filter(stat => stat !== null);
}

3. 动态生成多玩家表格行 #

拿到所有玩家数据后，循环生成表格行并插入到表格主体中，替换原有的单行逻辑：

function renderPlayerTable(playerStats) {
  const tableBody = document.getElementById("playerStatsTable").querySelector("tbody");
  // 清空现有行，避免重复渲染
  tableBody.innerHTML = "";

  playerStats.forEach(stat => {
    const row = document.createElement("tr");
    row.innerHTML = `
      <td>${stat.username}</td>
      <td>${stat.wins}</td>
      <td>${stat.finalKills}</td>
      <td>${stat.fkdr}</td>
    `;
    tableBody.appendChild(row);
  });
}

对应的基础HTML表格结构：

<table id="playerStatsTable">
  <thead>
    <tr>
      <th>用户名</th>
      <th>胜场数</th>
      <th>最终击杀数</th>
      <th>FKDR</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

4. 绑定更新触发逻辑 #

在checkForUpdates函数中，重新提取玩家数据、拉取最新统计并更新表格：

async function checkForUpdates() {
  // 重新从log文件提取玩家名
  const newPlayerNames = extractPlayerNamesFromLog("你的log文件路径");
  // 获取最新统计数据
  const newPlayerStats = await fetchAllPlayerStats(newPlayerNames);
  // 更新表格内容
  renderPlayerTable(newPlayerStats);
}

5. 增量更新优化（可选） #

如果不想每次清空表格，可对比新旧数据，只更新变化的行：

async function updatePlayerTable() {
  const newPlayerNames = extractPlayerNamesFromLog("你的log文件路径");
  const newPlayerStats = await fetchAllPlayerStats(newPlayerNames);
  const tableBody = document.getElementById("playerStatsTable").querySelector("tbody");
  const existingRows = Array.from(tableBody.querySelectorAll("tr"));

  // 移除已离开 lobby 的玩家行
  existingRows.forEach(row => {
    const username = row.querySelector("td").textContent;
    if (!newPlayerStats.some(stat => stat.username === username)) {
      row.remove();
    }
  });

  // 更新现有玩家数据或新增新玩家行
  newPlayerStats.forEach(stat => {
    const existingRow = existingRows.find(row => row.querySelector("td").textContent === stat.username);
    if (existingRow) {
      // 更新数据
      existingRow.innerHTML = `
        <td>${stat.username}</td>
        <td>${stat.wins}</td>
        <td>${stat.finalKills}</td>
        <td>${stat.fkdr}</td>
      `;
    } else {
      // 新增行
      const newRow = document.createElement("tr");
      newRow.innerHTML = `
        <td>${stat.username}</td>
        <td>${stat.wins}</td>
        <td>${stat.finalKills}</td>
        <td>${stat.fkdr}</td>
      `;
      tableBody.appendChild(newRow);
    }
  });
}

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