如何在已定义HTML表格中动态添加总计单元格（Razor/C#场景）

针对你用C# Razor开发慈善房屋捐赠应用的场景，完全不需要用按钮添加单元格的方法，直接在服务器端渲染表格时插入总计行即可，下面分两种常见场景给出实现方案：

1. 基础静态/动态表格场景 #

如果你的表格是通过Razor循环渲染捐赠记录，只需要在表格的<tbody>末尾添加一行总计，通过colspan合并前面的单元格，把总计数值放到右下角单元格：

<table class="donation-table">
    <thead>
        <tr>
            <th>捐赠人</th>
            <th>房屋地址</th>
            <th>捐赠日期</th>
            <th>房屋估值</th>
        </tr>
    </thead>
    <tbody>
        <!-- Razor循环渲染捐赠数据 -->
        @foreach (var item in Model.DonationList)
        {
            <tr>
                <td>@item.DonorName</td>
                <td>@item.HouseAddress</td>
                <td>@item.DonationDate.ToString("yyyy-MM-dd")</td>
                <td>@item.HouseValue.ToString("C")</td>
            </tr>
        }
        <!-- 总计行：放在tbody最后，自动处于表格底部 -->
        <tr class="total-row">
            <!-- 合并前3列，设置文字右对齐 -->
            <td colspan="3" style="text-align:right; font-weight:600;">总计：</td>
            <!-- 总计数值放在右下角单元格 -->
            <td style="font-weight:600;">@Model.TotalAmount.ToString("C")</td>
        </tr>
    </tbody>
</table>

<!-- 可选：添加CSS美化样式 -->
<style>
.donation-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}
.donation-table th, .donation-table td {
    border: 1px solid #e0e0e0;
    padding: 10px;
}
.total-row {
    background-color: #f8f9fa;
}
</style>

2. 需后端逻辑控制的场景 #

如果需要根据捐赠数据是否存在来显示总计行，可以在Razor中加入条件判断：

// 后端预先计算总计值（也可以直接在视图中计算）
@{
    var total = Model.DonationList.Sum(d => d.HouseValue);
}

然后在表格中动态插入总计行：

<tbody>
    @foreach (var item in Model.DonationList)
    {
        <tr>
            <td>@item.DonorName</td>
            <td>@item.HouseAddress</td>
            <td>@item.DonationDate.ToString("yyyy-MM-dd")</td>
            <td>@item.HouseValue.ToString("C")</td>
        </tr>
    }
    <!-- 只有当有捐赠数据时才显示总计行 -->
    @if (Model.DonationList.Any())
    {
        <tr class="total-row">
            <td colspan="3" align="right"><strong>总计</strong></td>
            <td><strong>@total.ToString("C")</strong></td>
        </tr>
    }
</tbody>

核心思路说明 #

• 不需要客户端动态添加单元格，直接利用Razor的服务器端渲染能力，在表格结构中直接插入总计行，完全符合你的开发场景。
• 使用colspan属性合并左侧单元格，既保证布局整齐，又能让总计文字和数值自然落在表格右下角区域。
• 通过CSS样式可以快速区分总计行和普通数据行，提升页面美观度和可读性。

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