如何用CSS类选择器动态更新表格同行最终价格列？求JS可用选择器

DevOps 小满

2026-7-3

动态选择表格同行列元素的解决方案

核心思路是先定位输入框所在的表格行，再在该行范围内通过类选择器找到目标列，完全摆脱对列索引的依赖，哪怕表格列顺序调整也能正常工作。

原生JavaScript实现

假设折扣输入框是表格内的文本输入框，最终价格列带有.final-price类，原价列带有.original-price类（可根据实际业务调整选择器）：

// 绑定所有折扣输入框的输入事件
document.querySelectorAll('.s-table input[type="text"]').forEach(input => {
  input.addEventListener('input', function(e) {
    // 找到当前输入框所在的表格行
    const currentRow = e.target.closest('tr');
    if (!currentRow) return;

    // 在当前行内查找最终价格元素
    const finalPriceEl = currentRow.querySelector('.final-price');
    // 获取原价用于计算（按需调整选择器）
    const originalPrice = parseFloat(currentRow.querySelector('.original-price').textContent) || 0;
    const discountPercent = parseFloat(e.target.value) || 0;

    // 计算并更新最终价格
    const finalPrice = originalPrice * (1 - discountPercent / 100);
    finalPriceEl.textContent = finalPrice.toFixed(2);
  });
});

jQuery实现（若你使用jQuery）

如果你习惯用jQuery，写法逻辑一致，同样不依赖列索引：

$('.s-table input[type="text"]').on('input', function() {
  const $row = $(this).closest('tr');
  const $finalPrice = $row.find('.final-price');
  
  const originalPrice = parseFloat($row.find('.original-price').text()) || 0;
  const discountPercent = parseFloat($(this).val()) || 0;
  const finalPrice = originalPrice * (1 - discountPercent / 100);
  
  $finalPrice.text(finalPrice.toFixed(2));
});