How to get selected row values from a dynamic html table using JQuery?

I have a html table dynamically populated from a database using laravel framework.

I have put a checkbox in the row header and a Save Entry button. I want to get only the checked row values of the table including the footer of the table which indicate the calculation summary.

something like this:

arrbreakdown = []; //push here the checked row values.  arrsummary = []; //push here the calculation summary.  

Here is my Html:

<table class="table table-bordered" id="purchasetable">      <thead>          <tr>              <th colspan="7" class="bg-secondary">                  Item Breakdown              </th>          </tr>          <tr class="text-center">              <th scope="col"><input type="checkbox" onclick="checkallcabin(this)" name="checkall"                      id="checkall"> </th>              <th scope="col">Item Name</th>              <th scope="col">Description</th>              <th scope="col">Qty</th>              <th scope="col">UM</th>              <th scope="col">Item Price</th>              <th scope="col">Total Price</th>              <script>                  function checkallcabin(bx) {                      for (var tbls = $('#purchasetable'), i = tbls.length; i--;)                          for (var bxs = tbls[i].getElementsByTagName("input"), j = bxs.length; j--;)                              if (bxs[j].type == "checkbox")                                  bxs[j].checked = bx.checked;                      setselect();                  }              </script>          </tr>      </thead>      <tbody>        </tbody>  </table>  

and my jquery:

function getpurchasereqinfo(prid) {      var val = (prid.value || prid.options[prid.selectedIndex].value);        $.ajax({              type: 'POST',              url: '/dashboard/purchasing/quotation/get-prrequestinfo',              data: {                  "refid": val,                  "transtype": $('#reqtype').val()              },              encode: true,              dataType: 'json',              headers: {                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')              },          })          .done(function (data) {              var cnt = 0;              $("#purchasetable > tbody").empty();                for (i in data.prrequestinfo) {                    cnt = cnt + 1;                  $("#purchasetable > tbody").                  append("<tr>" +                      "<td> <input onchange='enablereqinfo()' id='row" + cnt +                      "' type='checkbox' name='dtrow'></td>" +                      "<td>" + data.prrequestinfo[i]['item_name'] + "</td>" +                      "<td><input type='text' style='width:100%' value='"+ data.prrequestinfo[i]['idescription'] +"'></td>" +                      "<td>" + data.prrequestinfo[i]['um'] + "</td>" +                      "<td class='totalqty'>" + data.prrequestinfo[i]['quantity'] +                      "</td>" +                        "<td>" +                      "<input type='number' step='0.01' title='Currency' pattern='^\d+(?:\.\d{1,2})?$' onblur='this.parentNode.parentNode.style.backgroundColor=/^\d+(?:\.\d{1,2})?$/.test(this.value)?'inherit':'red' step='.01' style='max-width:100px;' value='0' onkeyup='calculateprice()' min='0'  class='iprice tnum' name='iprice'>" +                      "</td>" +                        "<td class='totalprice text-right'>" + '0.00' + "</td>" +                        "</tr>"                  );              }                  $("#purchasetable > tbody").              append(                    "<tr>" +                  "<th colspan='6'>Sub Total</th>" +                  "<th class='text-right subtotal'>0.00</th>" +                  "</tr>" +                  "<tr>" +                  "<th colspan='6'>Discount</th>" +                  "<th class='text-right'><input style='max-width:100px;' onkeyup='calculatetotals()' type='number' value='0.00' style='width:100%; font-weight:bold;' class='discount text-right'></th>" +                  "</tr>" +                  "<tr>" +                  "<th colspan='6'></th>" +                  "<th class='text-right taxtotal'>0.00</th>" +                  "</tr>" +                  "<tr>" +                  "<th colspan='6'>Net Amount</th>" +                  "<th class='text-right netamount'>0.00</th>" +                  "</tr>" +                  "<tr>" +                  "<th colspan='6'>Grand Total</th>" +                  "<th class='text-right grandtotal'>0.00</th>" +                  "</tr>"                );          });  }  

Any idea? Thanks

https://stackoverflow.com/questions/65572818/how-to-get-selected-row-values-from-a-dynamic-html-table-using-jquery January 05, 2021 at 11:25AM