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

Question

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.

Reproducible example:

<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>
        <tr>
            <td> <input onchange="enablereqinfo()" id="row1" type="checkbox" name="dtrow"></td>
            <td>TEST 1</td>
            <td><input type="text" style="width:100%" value="TEST DESC 1"></td>
            <td>PCS</td>
            <td class="totalqty">5</td>
            <td><input type="number" step="0.01" style="max-width:100px;" value="0.00" onkeyup="calculateprice()" min="0"
                    class="iprice tnum" name="iprice"></td>
            <td class="totalprice text-right">0.00</td>
        </tr>
        <tr>
            <td> <input onchange="enablereqinfo()" id="row2" type="checkbox" name="dtrow"></td>
            <td>TEST 2</td>
            <td><input type="text" style="width:100%" value="TEST DESC 2"></td>
            <td>M</td>
            <td class="totalqty">7</td>
            <td><input type="number" step="0.01" style="max-width:100px;" value="0.00" onkeyup="calculateprice()" min="0"
                    class="iprice tnum" name="iprice"></td>
            <td class="totalprice text-right">0.00</td>
        </tr>
        <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"
                    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>
    </tbody>
</table>

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

Answer 1

You can loop through all checkboxes which is checked using each loop and then push the values of rows inside your array using .val() or .text()

Demo Code :

$("#save").click(function() {
  var arrbreakdown = []; //push here the checked row values.
  var arrsummary = []; //push here the calculation summary.
  //loop through checked checkbox
  $("tbody input[type='checkbox']:checked").each(function() {
    var selector = $(this).closest('tr'); //get closest row
    //push values in array
    arrbreakdown.push({
      "Name": selector.find('td:eq(1)').text(),
      "Description": selector.find('td:eq(2) input').val(),
      "Qty": selector.find('td:eq(3)').text(),
      "UM": selector.find('td:eq(4)').text(),
      "Item_Price": selector.find('.iprice').val(),
      "Total": selector.find('td:eq(6)').text()
    })

  })
  //for summary
  arrsummary.push({
    "Sub_Total": $(".subtotal").text(),
    "Discount": $(".discount").val(),
    "taxtotal": $(".taxtotal").text(),
    "netamount": $(".netamount").text(),
    "grandtotal": $(".grandtotal").text()
  })
  console.log(arrsummary)
  console.log(arrbreakdown)

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
    <tr>
      <td> <input onchange="enablereqinfo()" id="row1" type="checkbox" name="dtrow"></td>
      <td>TEST 1</td>
      <td><input type="text" style="width:100%" value="TEST DESC 1"></td>
      <td>PCS</td>
      <td class="totalqty">5</td>
      <td><input type="number" step="0.01" style="max-width:100px;" value="0.00" onkeyup="calculateprice()" min="0" class="iprice tnum" name="iprice"></td>
      <td class="totalprice text-right">0.00</td>
    </tr>
    <tr>
      <td> <input id="row2" type="checkbox" name="dtrow"></td>
      <td>TEST 2</td>
      <td><input type="text" style="width:100%" value="TEST DESC 2"></td>
      <td>M</td>
      <td class="totalqty">7</td>
      <td><input type="number" step="0.01" style="max-width:100px;" value="0.00" onkeyup="calculateprice()" min="0" class="iprice tnum" name="iprice"></td>
      <td class="totalprice text-right">0.00</td>
    </tr>
    <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" class="discount text-right"></th>
    </tr>
    <tr>
      <th colspan="6"></th>
      <th class="text-right taxtotal">5.00</th>
    </tr>
    <tr>
      <th colspan="6">Net Amount</th>
      <th class="text-right netamount">4.00</th>
    </tr>
    <tr>
      <th colspan="6">Grand Total</th>
      <th class="text-right grandtotal">6.00</th>
    </tr>
  </tbody>
</table>
<button id="save">Save</button>