PHP+jQuery表单求和异常：无法将Amount值汇总至grand_total输入框

直接给你梳理代码里的问题并给出修复后的版本：

核心问题&修改点 #

1. 求和函数遍历了不存在的元素：原代码里grand_total()一直在找.total类输入框，但页面里只有.Amount类的金额输入框，得把遍历目标改成.Amount。
2. 部分操作后未触发求和：下拉框选值填充金额、删除行这两个操作后，都没调用求和函数，导致总和不更新。
3. 未处理空值/非数字情况：如果金额输入框为空或输入非数字，直接转Number会得到NaN，求和时要把这类情况按0处理。

修复后的完整代码 #

<tbody id='table'>
    <tr class="crow">
        <td style='width:150px;'>1</td>
        <td style='width:350px;'>
            <select class="form-control FID" required name="FID[]">
                <?php 
                    $options="<option value='' Amount='0' >Select</option>";
                    foreach($data["challan"] as $row){
                        $options.="<option value='{$row["FID"]}' Amount='{$row["Amount"]}'>{$row["Feetype"]}</option>";
                    }
                    echo $options;
                ?>
            </select> 
        </td>
        <td>
            <input type="text" name="Amount[]" class="form-control Amount" required>
        </td>
        <td>
            <input type="button" value="Remove" class="btn btn-link btn-xs rmv" required>
        </td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <td ><input type='button' class='btn btn-link add' value='+Add Row'></td>
        <td colspan="2" class="text-right">Total</td>
        <td><input type="text" name="grand_total" id="grand_total" class="form-control" required=""></td>
    </tr>
</tfoot>
</table>
</div>
</div>
</div>

<script>
$(document).ready(function(){
    
    $("body").on("click",".add",function(){
        var i=1;
        $(".crow").each(function(){
            i++;
        });
        var options="<?php echo $options; ?>";
       
        var row='<tr class="crow"> <td>'+i+'</td> <td> <select class="form-control FID chosen" required name="FID[]">'+options+'</select></td><td> <input type="text" name="Amount[]" class="form-control  Amount" required> </td><td> <input type="button" value="Remove" class="btn btn-link btn-xs rmv" required> </td></tr>';
        $("#table").append(row);
    });
    
    
    $("body").on("click",".rmv",function(){
        if(confirm('Are You Sure?')){
            $(this).parents('tr').remove();
            grand_total(); // 删除行后更新总和
        }
    });  
    
    
    $("body").on("change",".FID",function(){
       var p=$(this).find(":selected").attr("Amount");
       $(this).closest("tr").find(".Amount").val(p);
       grand_total(); // 填充金额后更新总和
    });


$("body").on("keyup",".Amount",function(){
    grand_total(); // 手动改金额时更新总和
});
    
function grand_total(){
    var tot=0;
    $(".Amount").each(function(){
        // 处理空值和非数字，确保求和不会出现NaN
        var val = $(this).val().trim();
        tot += isNaN(Number(val)) ? 0 : Number(val);
    });
    $("#grand_total").val(tot);
}

// 页面加载完成后初始化计算一次总和
grand_total();

});
</script>

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