如何用JavaScript为表格中不同客户组价格应用折扣并替换

没问题，我来帮你搞定这个JavaScript实现的折扣计算需求！下面是针对你的表格价格折扣更新的完整方案：

我们的核心目标是：针对表格中不同客户组的列，应用对应折扣后更新价格，同时严格保留$X.XX USD的原格式。

1. 先补全你的表格结构（方便测试） #

假设你的表格完整结构类似这样（基于你提供的代码片段补全）：

<table border="1">
  <tr>
    <th>Group A</th>
    <th>Group B</th>
    <th>Group C</th>
  </tr>
  <tr>
    <td>$19.95 USD</td>
    <td>$10.95 USD</td>
    <td>$29.95 USD</td>
  </tr>
  <tr>
    <td>$49.99 USD</td>
    <td>$34.50 USD</td>
    <td>$59.99 USD</td>
  </tr>
</table>

2. JavaScript实现代码 #

这段代码会自动定位各客户组列、计算折扣并更新价格，完全适配你的需求：

// 先定义好各客户组的折扣比例（20%折扣就是支付原价的80%，以此类推）
const groupDiscounts = {
  'Group A': 0.8,
  'Group B': 0.85,
  'Group C': 0.9
};

// 获取目标表格
const targetTable = document.querySelector('table');
if (!targetTable) {
  console.error('页面上没找到目标表格哦');
  return;
}

// 获取表头行，用来匹配各列对应的客户组
const headerRow = targetTable.querySelector('tr');
const headerCells = Array.from(headerRow.querySelectorAll('th'));

// 遍历每个表头，处理对应列的价格
headerCells.forEach((headerCell, columnIndex) => {
  const groupName = headerCell.textContent.trim();
  const discountRate = groupDiscounts[groupName];
  
  // 如果这个客户组没有定义折扣，直接跳过
  if (!discountRate) return;
  
  // 获取该列所有的价格单元格（跳过表头行）
  const dataRows = Array.from(targetTable.querySelectorAll('tr:not(:first-child)'));
  dataRows.forEach(row => {
    const priceCell = row.querySelectorAll('td')[columnIndex];
    if (!priceCell) return;
    
    // 从原格式中提取纯数字价格
    const priceMatch = priceCell.textContent.match(/\d+\.\d+/);
    if (!priceMatch) {
      console.warn(`这个单元格的价格格式不对：${priceCell.textContent}`);
      return;
    }
    
    const originalPrice = parseFloat(priceMatch[0]);
    // 计算折扣后价格，强制保留两位小数
    const discountedPrice = (originalPrice * discountRate).toFixed(2);
    // 替换回原格式
    priceCell.textContent = `$${discountedPrice} USD`;
  });
});

3. 代码细节说明 #

• 灵活适配列顺序：通过表头文本匹配折扣率，哪怕后续列的顺序调整，只要表头名称不变，代码就能正常工作
• 鲁棒的价格解析：用正则表达式/\d+\.\d+/提取价格数字，不怕格式小变动（比如空格位置、大小写）
• 格式严格保留：计算后用toFixed(2)确保价格始终是两位小数，完美还原$X.XX USD的展示格式
• 容错处理：加入了表格不存在、价格解析失败的提示，避免代码报错影响页面其他功能

4. 正确的使用方式 #

把这段代码放在页面底部（或者用DOMContentLoaded事件包裹，确保页面元素加载完成后再执行）：

document.addEventListener('DOMContentLoaded', function() {
  // 把上面的核心代码放在这里
});

这样页面加载完成后，表格里的价格就会自动更新为折扣后的数值啦！

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