Laravel中实现多行数据的JavaScript动态求和问题

在Laravel项目中用@forelse循环生成多行成绩输入表单时，动态求和功能仅第一行生效，核心问题出在重复ID和全局选择器导致的范围错误，下面是具体修正方案：

原代码问题分析 #

1. 所有输入框（如quiz、assignment）和结果输出框result都使用了重复ID，DOM中ID必须唯一，所以$('#result')只会匹配第一个元素。
2. JS逻辑计算了页面中所有.prc输入框的总和，而非当前输入所在行的数值，导致所有行的结果都只会更新到第一个输出框。

修正后的HTML代码 #

@forelse($subject as $data)
    <tr class="grade-row bg-white border-b dark:bg-gray-900 dark:border-gray-700">
        <th scope="row" class="form-group py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
            <input
                type="hidden"
                name="id_grade[]"
                value="{{$userGrades->id_grade}}"
            >
            <input
                type="number"
                name="quiz[]"
                value="0"
                autocomplete="quiz"
                class="prc bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
                required
            >
        </th>
        <th scope="row" class="form-group py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
            <input
                type="number"
                name="assignment[]"
                value="0"
                autocomplete="min_score"
                class="prc bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
                required
            >
        </th>
        <th scope="row" class="form-group py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
            <input
                type="number"
                name="d_t[]"
                value="0"
                autocomplete="d_t"
                class="prc bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
                required
            >
        </th>
        <th scope="row" class="form-group py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
            <input
                type="number"
                name="min_text[]"
                value="0"
                autocomplete="min_text"
                class="prc bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
                required
            >
        </th>
        <th scope="row" class="form-group py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
            <input
                type="number"
                name="final_text[]"
                value="0"
                autocomplete="final_text"
                class="prc bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
                required
            >
        </th>
        <th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
            <output
                type="number"
                name="total[]"
                class="total-result bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
            >
                0
            </output>
        </th>
    </tr>
@empty
    <tr colspan="6" class="bg-white border-b dark:bg-gray-900 dark:border-gray-700">
        <td class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
            No Data
        </td>
    </tr>
@endforelse

改动说明：

• 给每行<tr>添加grade-row类，用于定位当前行
• 删除所有重复的ID属性（ID在循环中会重复，无实际作用）
• 给结果输出框添加total-result类，用于定位当前行的结果容器

修正后的JavaScript代码 #

<script>
    $(document).on('input', '.prc', function(){
        // 获取当前输入框所在的行
        const currentRow = $(this).closest('.grade-row');
        let totalSum = 0;
        
        // 仅遍历当前行内的.prc输入框
        currentRow.find('.prc').each(function(){
            const inputVal = $(this).val();
            if($.isNumeric(inputVal)){
                totalSum += parseFloat(inputVal);
            }
        });
        
        // 计算平均分并更新当前行的结果框
        currentRow.find('.total-result').text(totalSum / 5);
    });
</script>

改动说明：

• 使用$(this).closest('.grade-row')精准定位当前输入所在的行，避免全局遍历
• 仅计算当前行内的.prc输入值总和
• 找到当前行的.total-result容器，更新结果，确保每行结果独立

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