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)

})

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