How to sum a few colums of html table created dynamicaly-CodePudding

I have created an HTML table from c# the data is being fetched from sql, I want to sum a few columns with 'td' tags and update the total every time swap button is clicked.

function for swap:

 function swap() {

        // We cannot swap if there are not 2 selected items
        if ($(".selected, .lastSelected").length != 2) { return; }

        // Set label with date data
        $("#lblSelectedDate").text($(".selected").siblings(".date").text());
        $("#lblLastSelectedDate").text($(".lastSelected").siblings(".date").text());

        // Set label with value data
        $("#lblSelectedValue").text($(".selected").children("input[type=hidden]").text());
        $("#lblLastSelectedValue").text($(".lastSelected").children("input[type=hidden]").text());

        // Swap cell data
        var temp = $(".lastSelected").html();
        $(".lastSelected").html($(".selected").html());
        $(".selected").html(temp);
        $(".selected, .lastSelected").removeClass();
        $('td').removeClass("selected");}

[![i want to show sum at the last row of the table][1]][1]

the generated table is like:

<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>

CodePudding user response：

You can write a jQuery function to calculate this to process the textNode.

function setTotal() {
  var trs = $('#DyanmicTable3 tr:not(:first-child):not(:last-child)');
  var lastTotalElement = $('#DyanmicTable3 tr:last-child');
  console.log(trs.length)
  const total = Array.from(trs)
    .reduce((acc, tr) => acc   Number(tr.children[8].textContent), 0);
  lastTotalElement[0].children[8].textContent = total;

  console.log(lastTotalElement[0].children[8])
}

JS Fiddle

Though I would better suggest you to keep the JS object loaded inside a window object somewhere. And perform operation on that collection rather than the rendered DOM. Perhaps something like below

function setTotal() {
   var lastTotalElement = $('#DyanmicTable3 tr:last-child');
   const total = data.reduce((acc, el) => acc   el.total);
   lastTotalElement[0].children[8].textContent = total;
}