基于jQuery实现rubric评分表格单选及列总分统计功能求助

核心修正点：

• 修正点击选中逻辑，实现每行独立单选，仅清除当前行内的其他选中状态
• 排除合计行的单元格绑定点击事件，避免误操作
• 新增列总分统计逻辑，每次选中后自动计算各列总得分
• 补充选中样式，让选中状态更明显

步骤1：添加选中样式（可自行调整视觉效果） #

#M3L1A1 td {
    width: 120px;
    height: 40px;
    border: 1px solid #ccc;
    cursor: pointer;
    text-align: center;
}
#M3L1A1 td.selected {
    background-color: #4CAF50;
    color: #fff;
    font-weight: bold;
}

步骤2：替换原有JS逻辑 #

你的原有HTML结构无需修改，直接替换script部分即可：

// *注：代码依赖jQuery，若页面未引入可自行引入对应版本的本地jQuery资源
$(function() {
    // 仅给非合计行的单元格绑定点击事件
    $('#M3L1A1 tbody tr:not(:last-child) td').click(function() {
        // 仅清空当前行的选中状态，不影响其他行
        const currentRow = $(this).closest('tr');
        currentRow.find('td').removeClass('selected').empty();
        // 标记当前选中单元格
        $(this).addClass('selected').text('X');
        
        // 统计各列选中数量，计算总得分
        const total2 = $('#M3L1A1 td.col2.selected').length * 5;
        const total3 = $('#M3L1A1 td.col3.selected').length * 3;
        const total4 = $('#M3L1A1 td.col4.selected').length * 0;
        
        // 写入合计行
        $('#colTotal2').text(total2);
        $('#colTotal3').text(total3);
        $('#colTotal4').text(total4);
    });
});

功能说明 #

1. 每行可独立选中2/3/4列中的任意一个单元格，不同行选择互不干扰
2. 选中单元格会显示绿色背景+白色X标记，状态清晰可辨
3. 每次选择后自动更新各列总得分，第二列单格计5分、第三列单格计3分、第四列单格计0分

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