如何对C#动态生成的HTML表格指定列求和并在Swap后更新

我通过C#从SQL获取数据生成了ID为DyanmicTable3的HTML表格，需要实现以下功能：

• 对L1至L6列（对应<td>标签的列）进行求和，结果展示在表格最后一行
• 点击Swap按钮触发swap()函数交换单元格数据后，自动更新表格最后一行的合计值

现有swap()函数代码 #

function swap() {
    // 未选中两个元素时无法执行交换
    if ($(".selected, .lastSelected").length != 2) { return; }

    // 设置日期标签文本
    $("#lblSelectedDate").text($(".selected").siblings(".date").text());
    $("#lblLastSelectedDate").text($(".lastSelected").siblings(".date").text());

    // 设置数值标签文本
    $("#lblSelectedValue").text($(".selected").children("input[type=hidden]").text());
    $("#lblLastSelectedValue").text($(".lastSelected").children("input[type=hidden]").text());

    // 交换单元格数据
    var temp = $(".lastSelected").html();
    $(".lastSelected").html($(".selected").html());
    $(".selected").html(temp);
    $(".selected, .lastSelected").removeClass();
    $('td').removeClass("selected");
}

表格结构示例 #

<table id='DyanmicTable3' clientIdMode='static' class='table table-bordered' width='100%' border-collapse: separate;>
    <tr>
        <th>PriorityNo</th>
        <th>Unit</th>
        <th>L1</th>
        <th>L2</th>
        <th>L3</th>
        <th>L4</th>
        <th>L5</th>
        <th>L6</th>
        <th>UnitTotal</th>
    </tr>
    <tr>
        <th>1</th>
        <th>Unit1</th>
        <td>23</td>
        <td></td><td></td><td></td><td></td><td></td><th>23</th><th style='TEXT-ALIGN: CENTER;'><button type='button' id='EditRow' onclick='swap()' class='btn btn-info btn-xs btn-edit bi bi-arrow-left-right' style='margin-right: 10px;'></button></th>
    </tr>
    <tr><th>1</th><th>Unit2</th><td></td><td></td><td>23</td><td></td><td></td><td></td><th>23</th><th style='TEXT-ALIGN: CENTER;'><button type='button' id='EditRow' onclick='swap()' class='btn btn-info btn-xs btn-edit bi bi-arrow-left-right' style='margin-right: 10px;'></button></th></tr>
    <tr><th>1</th><th>Unit3</th><td></td><td></td><td>24</td><td></td><td></td><td></td><th>24</th><th style='TEXT-ALIGN: CENTER;'><button type='button' id='EditRow' onclick='swap()' class='btn btn-info btn-xs btn-edit bi bi-arrow-left-right' style='margin-right: 10px;'></button></th></tr>
    <tr><th>1</th><th>Unit4</th><td>0</td><td>6</td><td>0</td><td>10</td><td></td><td></td><th>16</th><th style='TEXT-ALIGN: CENTER;'><button type='button' id='EditRow' onclick='swap()' class='btn btn-info btn-xs btn-edit bi bi-arrow-left-right' style='margin-right: 10px;'></button></th></tr>
    <tr><th>1</th><th>Unit5</th><td>7</td><td></td><td>0</td><td></td><td></td><td>10</td><th>17</th><th style='TEXT-ALIGN: CENTER;'><button type='button' id='EditRow' onclick='swap()' class='btn btn-info btn-xs btn-edit bi bi-arrow-left-right' style='margin-right: 10px;'></button></th></tr><tr>
        <th>1</th><th>Unit6</th><td></td><td>7</td><td>0</td><td>10</td><td></td><td></td><th>17</th><th style='TEXT-ALIGN: CENTER;'><button type='button' id='EditRow' onclick='swap()' class='btn btn-info btn-xs btn-edit bi bi-arrow-left-right' style='margin-right: 10px;'></button></th></tr><tr>
            <th>2</th><th>Sum of Bloom Level</th><td>30</td><td>13</td><td>47</td><td>20</td><td>0</td><td>10</td><th></th><th style='TEXT-ALIGN: CENTER;'><button type='button' id='EditRow' onclick='swap()' class='btn btn-info btn-xs btn-edit bi bi-arrow-left-right' style='margin-right: 10px;'></button></th>
      </tr>
</table>

内容的提问来源于stack exchange，提问作者Vikash kumar sen