基于数值与文本触发表格背景动态变色的实现方案咨询

仅靠HTML无法实现你需要的动态效果——HTML是静态标记语言，只能定义页面初始结构，没办法根据内容变化自动修改元素样式。要实现这个需求，必须结合JavaScript处理逻辑，以下是完整实现方案：

完整代码实现 #

HTML（修改为可输入的总金额框） #

<table id="table-id">
  <thead>
    <tr>
      <th>A/A</th>
      <th>MONEY</th>
      <th>GOAL</th>
    </tr>
  </thead>
  <tbody>
    <tr data-row-id="1">
      <td>1</td>
      <td>$100</td>
      <td>&#x2713;</td>
    </tr>
    <tr data-row-id="2">
      <td>2</td>
      <td>$200</td>
      <td>--</td>
    </tr>
    <tr data-row-id="3">
      <td>3</td>
      <td>$500</td>
      <td>--</td>
    </tr>
  </tbody>
</table>

<h3>Total: 
<input type="text" id="money" value="$100.00" />
</h3>

CSS（新增高亮样式） #

.table {
  width: 100%;
  top:0; 
}

th {
  background:purple;
  color: #f1f1f1;
  font-size:15px;
  padding:4px;
}

td {
  background: #376282;
  color: #fff;
  font-size:15px;
  padding:4px;
  text-align:center;
}

#money {
  background: gold;
  color: blue;
  font-size:15px;
  padding:4px;
  text-align:center;
}

/* 高亮背景样式 */
.green-bg td {
  background-color: green;
}

JavaScript（实现动态逻辑） #

const moneyInput = document.getElementById('money');
const tableRows = document.querySelectorAll('#table-id tbody tr');

// 监听总金额输入变化
moneyInput.addEventListener('input', function() {
  // 先清除所有行的高亮样式
  tableRows.forEach(row => row.classList.remove('green-bg'));
  
  // 获取并格式化输入金额
  const inputValue = this.value.trim();
  
  // 根据金额匹配高亮规则
  if (inputValue === '$100.00') {
    document.querySelector('[data-row-id="1"]').classList.add('green-bg');
  } else if (inputValue === '$200.00') {
    document.querySelector('[data-row-id="1"]').classList.add('green-bg');
    document.querySelector('[data-row-id="2"]').classList.add('green-bg');
  }
});

// 页面加载时初始化样式
moneyInput.dispatchEvent(new Event('input'));

逻辑说明 #

1. 将静态的span改为input文本框，支持手动输入总金额；
2. 给表格行添加data-row-id属性，方便精准定位对应行；
3. 通过JavaScript监听输入框内容变化，每次输入先清除所有行高亮，再匹配对应规则添加绿色背景；
4. 页面加载时自动触发一次输入事件，确保初始样式符合当前金额设置。

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