如何在PHP可编辑DataTable中按总分规则自动填充Grade列值

核心逻辑 #

• 封装通用的总分转等级工具函数，可复用在初始化和编辑更新两个场景
• 表格行首次渲染时，直接基于已有的Total值计算Grade并填充
• 监听所有分数相关列的编辑保存事件，实时更新Grade值并自动同步到后端

具体修改步骤 #

1. 修正现有代码的小问题 #

现有代码中Presence列的可编辑绑定选择器大小写不匹配，将selector:'td.presence'改为selector:'td.Presence'，否则编辑事件无法触发。

2. 新增总分转等级公共函数 #

在$(document).ready开头添加如下工具函数：

// 总分转等级函数
function getGrade(totalScore) {
  const total = Number(totalScore) || 0;
  if (total > 80) return 'A';
  if (total >= 70) return 'B';
  if (total >= 60) return 'C';
  if (total >= 50) return 'D';
  return 'E';
}

3. 行初始化时自动填充Grade #

在现有createdRow钩子的末尾添加Grade计算逻辑：

createdRow:function(row, data, rowIndex)
{
    // 原有给td加属性的逻辑不变
    $.each($('td', row), function(colIndex){
        // ... 原有代码保持不变
    });
    // 新增：初始化时计算并填充Grade
    const totalVal = $(row).find('td.Total').text().trim();
    const grade = getGrade(totalVal);
    $(row).find('td.Grade').text(grade);
}

4. 编辑Total列后实时更新Grade #

给Total列的editable配置添加success回调，编辑保存后自动更新Grade：

$('#sample_data').editable({
    container:'body',
    selector:'td.Total',
    url:'update.php',
    title:'Total',
    type:'POST',
    validate:function(value){
        if($.trim(value) == '')
        {
            return 'This field is required';
        }
        // 可选：添加数值校验，避免录入非数字
        if(isNaN(Number(value))) {
            return '请输入合法的数字';
        }
    },
    // 新增：保存Total后自动更新Grade
    success: function(response, newValue) {
        const $row = $(this).closest('tr');
        const grade = getGrade(newValue);
        const $gradeTd = $row.find('td.Grade');
        // 更新页面显示
        $gradeTd.text(grade);
        // 自动提交Grade到后端，无需手动编辑
        $gradeTd.editable('setValue', grade);
        $gradeTd.editable('submit');
    }
});

可选优化：自动计算总分（无需手动录入Total） #

如果希望用户只需要填出席、作业、期中、期末四个值，自动算出总分和等级，可以给这四个列的editable都加如下success回调：

// 四个分数列的editable配置都加这个success回调，以Presence为例
success: function() {
    const $row = $(this).closest('tr');
    // 读取四个分数值，默认0
    const presence = Number($row.find('td.Presence').text().trim()) || 0;
    const coursework = Number($row.find('td.Coursework').text().trim()) || 0;
    const midExam = Number($row.find('td.MidExam').text().trim()) || 0;
    const finalExam = Number($row.find('td.FinalExam').text().trim()) || 0;
    // 计算总分
    const total = presence + coursework + midExam + finalExam;
    // 更新Total列并提交
    const $totalTd = $row.find('td.Total');
    $totalTd.text(total);
    $totalTd.editable('setValue', total);
    $totalTd.editable('submit');
    // 自动计算更新Grade
    const grade = getGrade(total);
    const $gradeTd = $row.find('td.Grade');
    $gradeTd.text(grade);
    $gradeTd.editable('setValue', grade);
    $gradeTd.editable('submit');
}

可选：关闭Grade列的手动编辑 #

如果不允许手动修改Grade，可以直接删除Grade列的editable配置，避免人工录入错误。

修改后完整代码 #

<script type="text/javascript" language="javascript">
$(document).ready(function(){
    // 新增：总分转等级工具函数
    function getGrade(totalScore) {
      const total = Number(totalScore) || 0;
      if (total > 80) return 'A';
      if (total >= 70) return 'B';
      if (total >= 60) return 'C';
      if (total >= 50) return 'D';
      return 'E';
    }

    var dataTable = $('#sample_data').DataTable({
        "processing": true,
        "serverSide": true,
        "order":[],
        "ajax":{
            url:"fetch.php",
            type:"POST",
        },
        createdRow:function(row, data, rowIndex)
        {
            $.each($('td', row), function(colIndex){
                if(colIndex == 1)
                {
                    $(this).attr('data-name', 'Id_Student');
                    $(this).attr('class', 'Id_Student');
                    $(this).attr('data-type', 'text');
                    $(this).attr('data-pk', data[0]);
                }
                if(colIndex == 2)
                {
                    $(this).attr('data-name', 'Name');
                    $(this).attr('class', 'Name');
                    $(this).attr('data-type', 'text');
                    $(this).attr('data-pk', data[0]);
                }
                if(colIndex == 3)
                {
                    $(this).attr('data-name', 'Id_Course');
                    $(this).attr('class', 'Id_Course');
                    $(this).attr('data-type', 'text');
                    $(this).attr('data-pk', data[0]);
                }
                if(colIndex == 4)
                {
                    $(this).attr('data-name', 'Semester');
                    $(this).attr('class', 'Semester');
                    $(this).attr('data-type', 'text');
                    $(this).attr('data-pk', data[0]);
                }
                if(colIndex == 5)
                {
                    $(this).attr('data-name', 'Presence');
                    $(this).attr('class', 'Presence');
                    $(this).attr('data-type', 'text');
                    $(this).attr('data-pk', data[0]);
                }
                if(colIndex == 6)
                {
                    $(this).attr('data-name', 'Coursework');
                    $(this).attr('class', 'Coursework');
                    $(this).attr('data-type', 'text';
                    $(this).attr('data-pk', data[0]);
                }
                if(colIndex == 7)
                {
                    $(this).attr('data-name', 'MidExam');
                    $(this).attr('class', 'MidExam');
                    $(this).attr('data-type', 'text');
                    $(this).attr('data-pk', data[0]);
                }
                if(colIndex == 8)
                {
                    $(this).attr('data-name', 'FinalExam');
                    $(this).attr('class', 'FinalExam');
                    $(this).attr('data-type', 'text');
                    $(this).attr('data-pk', data[0]);
                }
                if(colIndex == 9)
                {
                    $(this).attr('data-name', 'Total');
                    $(this).attr('class', 'Total');
                    $(this).attr('data-type', 'text');
                    $(this).attr('data-pk', data[0]);
                }
                if(colIndex == 10)
                {
                    $(this).attr('data-name', 'Grade');
                    $(this).attr('class', 'Grade');
                    $(this).attr('data-type', 'text');
                    $(this).attr('data-pk', data[0]);
                }
            });
            // 新增：行初始化时自动填充Grade
            const totalVal = $(row).find('td.Total').text().trim();
            const grade = getGrade(totalVal);
            $(row).find('td.Grade').text(grade);
        }
    });

    $('#sample_data').editable({
        container:'body',
        selector:'td.Presence', // 修正：首字母大写匹配类名
        url:'update.php',
        title:'presence',
        type:'POST',
        validate:function(value){
            if($.trim(value) == '')
            {
                return 'This field is required';
            }
        }
    });

    $('#sample_data').editable({
        container:'body',
        selector:'td.Coursework',
        url:'update.php',
        title:'Coursework',
        type:'POST',
        validate:function(value){
            if($.trim(value) == '')
            {
                return 'This field is required';
            }
        }
    });

    $('#sample_data').editable({
        container:'body',
        selector:'td.MidExam',
        url:'update.php',
        title:'MidExam',
        type:'POST',
        validate:function(value){
            if($.trim(value) == '')
            {
                return 'This field is required';
            }
        }
    });

    $('#sample_data').editable({
        container:'body',
        selector:'td.FinalExam',
        url:'update.php',
        title:'FinalExam',
        type:'POST',
        validate:function(value){
            if($.trim(value) == '')
            {
                return 'This field is required';
            }
        }
    });
    $('#sample_data').editable({
        container:'body',
        selector:'td.Total',
        url:'update.php',
        title:'Total',
        type:'POST',
        validate:function(value){
            if($.trim(value) == '')
            {
                return 'This field is required';
            }
            if(isNaN(Number(value))) {
                return '请输入合法的数字';
            }
        },
        // 新增：保存Total后自动更新Grade
        success: function(response, newValue) {
            const $row = $(this).closest('tr');
            const grade = getGrade(newValue);
            const $gradeTd = $row.find('td.Grade');
            $gradeTd.text(grade);
            $gradeTd.editable('setValue', grade);
            $gradeTd.editable('submit');
        }
    });
    $('#sample_data').editable({
        container:'body',
        selector:'td.Grade',
        url:'update.php',
        title:'Grade',
        type:'POST',
        validate:function(value){
            if($.trim(value) == '')
            {
                return 'This field is required';
            }
        }
    });
}); 
</script>

内容的提问来源于stack exchange，提问作者Roymond Chandra Pradana