页面加载时sum_row_qty函数无输出的问题求助

核心问题 #

页面加载时调用sum_row_qty()虽进入else分支，但未更新.qty输入框，根源在于两个关键点：

• 动态表格渲染时机不匹配：window.load或$(document).ready()触发时，服务器数据尚未完成表格渲染，此时querySelectorAll无法获取到动态生成的表格行元素。
• 函数逻辑存在隐患：原else分支通过遍历每行第一个input触发计算，若输入值为空会导致rowTotal变为NaN，而number类型输入框不接受NaN值，最终赋值失效。

修复步骤 #

1. 优化函数初始化逻辑

修改sum_row_qty的else分支，直接遍历所有表格行计算总和，同时处理空值避免NaN：

function sum_row_qty(el) {
  let rowTotal = 0
  if (el) {
    let parent = el.closest('tr')
    parent.querySelectorAll('.size_qty').forEach(function(e) {
      // 将空值或非数字转为0，避免NaN
      rowTotal += parseFloat(e.value) || 0
    })
    parent.querySelector('.qty').value = rowTotal
  } else {
    // 直接遍历所有表格行，逐行计算总和
    document.querySelectorAll('#tableRows > tr').forEach(function(tr) {
      let total = 0
      tr.querySelectorAll('.size_qty').forEach(function(e) {
        total += parseFloat(e.value) || 0
      })
      tr.querySelector('.qty').value = total
    })
  }
}

2. 确保在表格渲染完成后调用函数

放弃在window.load或$(document).ready()中调用，改为在动态表格渲染完成的回调函数中执行sum_row_qty()。例如：

// 示例：ajax获取数据并渲染表格的逻辑
$.ajax({
  url: '你的数据接口地址',
  success: function(data) {
    // 执行表格渲染代码（比如把data插入到#tableRows）
    renderTableToDOM(data);
    // 表格渲染完成后触发总和计算
    sum_row_qty();
  }
})

3. 备用方案：监听表格DOM变化

如果无法确定表格渲染的具体时机，可使用MutationObserver自动监听表格内容变化并触发计算：

const tableRows = document.getElementById('tableRows');
const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    // 当有新节点添加到表格时，重新计算总和
    if (mutation.addedNodes.length > 0) {
      sum_row_qty();
    }
  });
});

// 监听表格的子节点变化（包括嵌套元素）
observer.observe(tableRows, {
  childList: true,
  subtree: true
});

验证要点 #

• 在计算逻辑中添加console.log(rowTotal)，确认是否出现NaN值。
• 检查动态渲染完成后，#tableRows下是否存在有效的<tr>元素。

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