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

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

})

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><tableclass="table table-bordered"id="purchasetable"><thead><tr><thcolspan="7"class="bg-secondary">
        Item Breakdown
      </th></tr><trclass="text-center"><thscope="col"><inputtype="checkbox"onclick="checkallcabin(this)"name="checkall"id="checkall"></th><thscope="col">Item Name</th><thscope="col">Description</th><thscope="col">Qty</th><thscope="col">UM</th><thscope="col">Item Price</th><thscope="col">Total Price</th><script>functioncheckallcabin(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><inputonchange="enablereqinfo()"id="row1"type="checkbox"name="dtrow"></td><td>TEST 1</td><td><inputtype="text"style="width:100%"value="TEST DESC 1"></td><td>PCS</td><tdclass="totalqty">5</td><td><inputtype="number"step="0.01"style="max-width:100px;"value="0.00"onkeyup="calculateprice()"min="0"class="iprice tnum"name="iprice"></td><tdclass="totalprice text-right">0.00</td></tr><tr><td><inputid="row2"type="checkbox"name="dtrow"></td><td>TEST 2</td><td><inputtype="text"style="width:100%"value="TEST DESC 2"></td><td>M</td><tdclass="totalqty">7</td><td><inputtype="number"step="0.01"style="max-width:100px;"value="0.00"onkeyup="calculateprice()"min="0"class="iprice tnum"name="iprice"></td><tdclass="totalprice text-right">0.00</td></tr><tr><thcolspan="6">Sub Total</th><thclass="text-right subtotal">0.00</th></tr><tr><thcolspan="6">Discount</th><thclass="text-right"><inputstyle="max-width:100px;"onkeyup="calculatetotals()"type="number"value="0.00"class="discount text-right"></th></tr><tr><thcolspan="6"></th><thclass="text-right taxtotal">5.00</th></tr><tr><thcolspan="6">Net Amount</th><thclass="text-right netamount">4.00</th></tr><tr><thcolspan="6">Grand Total</th><thclass="text-right grandtotal">6.00</th></tr></tbody></table><buttonid="save">Save</button>