如何使用JS为游戏升级表格添加预格式化按钮并压缩空白？

嘿，我来帮你搞定这个游戏升级表格的问题！要把那些预写好的升级按钮添加到你的空表格里，同时压缩HTML空白，其实很简单，分几步来就行：

1. 先理清楚你的基础结构 #

你的初始表格是这样的：

<table id='upgradeTable'> 
  <tr> 
    <td> </td> 
  </tr>
</table>

我们可以选择往现有单元格里添加按钮，或者给每个按钮单独建一行（后者更符合表格布局逻辑，推荐使用）。

2. 准备你的升级按钮代码 #

假设你有多个预写好的升级按钮，比如：

<button id="mastersDegreeUpgButton" class="upgradeButton" onclick="buyMastersDegree()">
  Master's Degree<br>
  Cost: <span id="mastersDegreeCost">100</span> coins<br>
  Effect: +5 coins/sec
</button>

<button id="phdUpgButton" class="upgradeButton" onclick="buyPhD()">
  PhD<br>
  Cost: <span id="phdCost">500</span> coins<br>
  Effect: +20 coins/sec
</button>

3. 用JS实现添加和空白压缩 #

下面是完整的JS代码，我会逐行解释：

// 第一步：获取你的升级表格元素
const upgradeTable = document.getElementById('upgradeTable');

// 第二步：把所有升级按钮的HTML存到数组里（方便批量处理）
const rawUpgradeButtons = [
  `
  <button id="mastersDegreeUpgButton" class="upgradeButton" onclick="buyMastersDegree()">
    Master's Degree<br>
    Cost: <span id="mastersDegreeCost">100</span> coins<br>
    Effect: +5 coins/sec
  </button>
  `,
  `
  <button id="phdUpgButton" class="upgradeButton" onclick="buyPhD()">
    PhD<br>
    Cost: <span id="phdCost">500</span> coins<br>
    Effect: +20 coins/sec
  </button>
  `
];

// 第三步：压缩每个按钮HTML里的多余空白
const cleanedButtons = rawUpgradeButtons.map(buttonHtml => {
  // 把换行、制表符、多个连续空格都换成单个空格，再去掉首尾空白
  return buttonHtml.replace(/\s+/g, ' ').trim();
});

// 第四步：把处理好的按钮添加到表格里（每行一个按钮的方式）
cleanedButtons.forEach(buttonHtml => {
  // 创建新的表格行和单元格
  const newRow = document.createElement('tr');
  const newCell = document.createElement('td');
  
  // 把压缩后的按钮HTML插入单元格
  newCell.innerHTML = buttonHtml;
  
  // 把单元格加到行里，行加到表格里
  newRow.appendChild(newCell);
  upgradeTable.appendChild(newRow);
});

关键细节说明： #

• 空白压缩：用replace(/\s+/g, ' ')可以把所有连续的空白字符（包括换行、空格、制表符）替换成单个空格，再用trim()去掉首尾的空白，这样HTML会变得紧凑，不会因为多余空白导致布局错乱。
• 批量处理：把按钮放在数组里，用map和forEach可以轻松处理多个升级按钮，后续加新升级只需要往数组里加新的HTML块就行。
• 表格布局：用createElement创建新的行和单元格，每个按钮占一行，符合表格的结构逻辑，也方便后续样式调整。

可选优化：如果想往现有单元格里添加按钮 #

如果你不想新增行，而是把所有按钮塞进初始的那个单元格里，可以把第四步换成：

// 获取初始表格里的第一个单元格
const initialCell = upgradeTable.querySelector('td');

// 把每个按钮用div包裹（方便控制间距），然后添加到单元格
cleanedButtons.forEach(buttonHtml => {
  const buttonWrapper = document.createElement('div');
  buttonWrapper.className = 'upgrade-item'; // 加个类方便写CSS样式
  buttonWrapper.innerHTML = buttonHtml;
  initialCell.appendChild(buttonWrapper);
});

然后可以加一点CSS来控制按钮间距：

.upgrade-item {
  margin: 8px 0;
}

这样你的升级按钮就会整齐地出现在表格里，HTML也没有多余的空白啦！

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