如何实现数组形式文本框的数值求和：两框相加结果入第三框

嘿，我来帮你搞定这个需求！你需要让循环生成的每行里，两个输入框的数值相加，结果自动显示到第三个文本框里对吧？咱们可以结合你现有的PHP循环结构，用JavaScript来实现实时计算的功能，以下是完整的解决方案：

修改后的完整代码片段 #

<tbody>
    <?php $i=1; foreach ($sub as $row) { ?>
    <tr>
        <td><?php echo $i++;?> </td>
        <td>
            <div><span style="border: none;">
                <input type="text" name="subject[]" class="textbox" value="<?php echo $row->subject_name;?>">
            </span></div>
        </td>
        <!-- 第一个加数输入框 -->
        <td><input type="text" name="mark-1[]" class="textbox mark-input" value=""></td>
        <!-- 第二个加数输入框 -->
        <td><input type="text" name="mark-2[]" class="textbox mark-input" value=""></td>
        <!-- 结果显示输入框（设为只读避免手动修改） -->
        <td><input type="text" name="mark-total[]" class="textbox mark-total" readonly value=""></td>
    </tr>
    <?php } ?>
</tbody>

<script>
// 获取所有加数输入框，监听输入事件
document.querySelectorAll('.mark-input').forEach(input => {
    input.addEventListener('input', calculateTotal);
});

function calculateTotal() {
    // 获取当前输入框所在的行
    const row = this.closest('tr');
    // 获取当前行的两个加数输入框
    const mark1 = row.querySelector('[name="mark-1[]"]');
    const mark2 = row.querySelector('[name="mark-2[]"]');
    // 获取结果输入框
    const totalBox = row.querySelector('[name="mark-total[]"]');

    // 处理空值或非数字的情况，默认转为0
    const value1 = parseFloat(mark1.value) || 0;
    const value2 = parseFloat(mark2.value) || 0;

    // 计算总和并赋值
    totalBox.value = value1 + value2;
}
</script>

关键说明 #

• 我给两个加数输入框加了统一的类名 mark-input，方便JavaScript批量绑定事件；给结果框加了 mark-total 类，同时设置 readonly 属性防止用户手动修改结果。
• calculateTotal 函数会在输入内容变化时触发，通过 closest('tr') 定位到当前输入框所在的行，确保只计算当前行的数值，不会干扰其他行。
• 用 parseFloat() 转换输入值，同时处理空值或非数字的情况（转为0），避免出现NaN的错误结果。
• 完全保留了你原有的PHP循环结构，生成多行的输入框组，每行的计算都是独立的。

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