如何在HTML表格中对相同名称的行值求和并计算平均评分

现有代码问题分析 #

1. 没有按display_name去重分组，导致同一个用户会重复输出多条表格行
2. 计算平均评分时没有过滤当前用户的评分，且未遵循0分不计入统计分母、全0时平均分为0的规则，计算结果不符合需求
3. 变量sumrate、n仅在当前评分大于0时才定义，遇到全0评分场景会出现变量未定义报错
4. 每行都嵌套遍历全量评分计算平均，逻辑冗余性能差

解决方案 #

优先推荐在后端代码中先完成分组和平均分计算，再传给模板渲染，逻辑更清晰。如果只能在模板中实现，可参考如下修复后的代码：

<table width="100%">
    <thead>
        <tr>
            <th class="billing" width="20%">User Name</th>
            <th class="billing" width="5%">Average Rating</th>
        </tr>
    </thead>
    <tbody>
        {% if rating|length > 0 %}
            {# 先按display_name分组存储评分 #}
            {% set user_ratings = {} %}
            {% for item in rating %}
                {% if item.display_name not in user_ratings %}
                    {% set _ = user_ratings.update({item.display_name: []}) %}
                {% endif %}
                {% set _ = user_ratings[item.display_name].append(item.rating) %}
            {% endfor %}

            {# 遍历每个用户渲染行 #}
            {% for username, scores in user_ratings.items() %}
                {% set sum_score = scores|sum %}
                {% set valid_count = scores|select('>', 0)|list|length %}
                {% set avg = sum_score / valid_count if valid_count > 0 else 0 %}
                <tr>
                    <td>{{ username }}</td>
                    <td>
                        {# 星星渲染逻辑保留，使用当前用户的平均分即可 #}
                        {% if avg < 1 and avg > 0 %}
                            <i class="fa fa-star-half-o checked"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                        {% elif avg == 1 %}
                            <i class="fa fa-star checked"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                        {% elif avg < 2 and avg > 1 %}
                            <i class="fa fa-star checked"></i>
                            <i class="fa fa-star-half-o checked"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                        {% elif avg == 2 %}
                            <i class="fa fa-star checked"></i>
                            <i class="fa fa-star checked"></i>
                            <i class="fa fa-star "></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                        {% elif avg < 3 and avg > 2 %}
                            <i class="fa fa-star checked"></i>
                            <i class="fa fa-star checked"></i>
                            <i class="fa fa-star-half-o checked "></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                        {% elif avg == 3 %}
                            <i class="fa fa-star checked"></i>
                            <i class="fa fa-star checked"></i>
                            <i class="fa fa-star checked"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                        {% elif avg < 4 and avg > 3 %}
                            <i class="fa fa-star checked"></i>
                            <i class="fa fa-star checked"></i>
                            <i class="fa fa-star checked"></i>
                            <i class="fa fa-star-half-o checked"></i>
                            <i class="fa fa-star"></i>
                        {% elif avg == 4 %}
                            <i class="fa fa-star checked"></i>
                            <i class="fa fa-star checked"></i>
                            <i class="fa fa-star checked"></i>
                            <i class="fa fa-star checked "></i>
                            <i class="fa fa-star"></i>
                        {% elif avg < 5 and avg > 4 %}
                            <i class="fa fa-star checked"></i>
                            <i class="fa fa-star checked"></i>
                            <i class="fa fa-star checked"></i>
                            <i class="fa fa-star checked "></i>
                            <i class="fa fa-star-half-o checked"></i>
                        {% elif avg == 5 %}
                            <i class="fa fa-star checked"></i>
                            <i class="fa fa-star checked"></i>
                            <i class="fa fa-star checked"></i>
                            <i class="fa fa-star checked "></i>
                            <i class="fa fa-star checked"></i>
                        {% endif %}
                        {{ avg }}
                    </td>
                </tr>
            {% endfor %}
        {% else %}
            <tr><td colspan="2"> No listings yet. </td></tr>
        {% endif %}
    </tbody>
</table>

实现说明 #

• 先用字典将所有评分按用户名分组，避免同一用户重复输出
• 计算平均时，先统计组内大于0的有效评分数量，有效数为0时直接返回0分，否则用总分除以有效数得到平均分，完全匹配需求的计算规则
• 原有星星渲染逻辑不变，仅替换为当前用户的平均分即可正常渲染

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