title: How to get selected row values from a dynamic html table using JQuery?
body: <p>I have a html table dynamically populated from a database using laravel framework.</p>
  <p><a href="https://i.stack.imgur.com/2XZzy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2XZzy.png" alt="enter image description here" /></a></p>
  <p>I have put a checkbox in the row header and a <code>Save Entry</code> button. I want to get only the checked row values of the table including the footer of the table which indicate the calculation summary.</p>
  <p><a href="https://i.stack.imgur.com/2uqQr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2uqQr.png" alt="enter image description here" /></a></p>
  <p>something like this:</p>
  <pre><code>arrbreakdown = []; //push here the checked row values.
  arrsummary = []; //push here the calculation summary.
  </code></pre>
  <p><strong>Reproducible example:</strong></p>
  <pre><code>&lt;table class=&quot;table table-bordered&quot; id=&quot;purchasetable&quot;&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th colspan=&quot;7&quot; class=&quot;bg-secondary&quot;&gt;
                  Item Breakdown
              &lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr class=&quot;text-center&quot;&gt;
              &lt;th scope=&quot;col&quot;&gt;&lt;input type=&quot;checkbox&quot; onclick=&quot;checkallcabin(this)&quot; name=&quot;checkall&quot;
                      id=&quot;checkall&quot;&gt; &lt;/th&gt;
              &lt;th scope=&quot;col&quot;&gt;Item Name&lt;/th&gt;
              &lt;th scope=&quot;col&quot;&gt;Description&lt;/th&gt;
              &lt;th scope=&quot;col&quot;&gt;Qty&lt;/th&gt;
              &lt;th scope=&quot;col&quot;&gt;UM&lt;/th&gt;
              &lt;th scope=&quot;col&quot;&gt;Item Price&lt;/th&gt;
              &lt;th scope=&quot;col&quot;&gt;Total Price&lt;/th&gt;
              &lt;script&gt;
                  function checkallcabin(bx) {
                      for (var tbls = $('#purchasetable'), i = tbls.length; i--;)
                          for (var bxs = tbls[i].getElementsByTagName(&quot;input&quot;), j = bxs.length; j--;)
                              if (bxs[j].type == &quot;checkbox&quot;)
                                  bxs[j].checked = bx.checked;
                      setselect();
                  }
              &lt;/script&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt; &lt;input onchange=&quot;enablereqinfo()&quot; id=&quot;row1&quot; type=&quot;checkbox&quot; name=&quot;dtrow&quot;&gt;&lt;/td&gt;
              &lt;td&gt;TEST 1&lt;/td&gt;
              &lt;td&gt;&lt;input type=&quot;text&quot; style=&quot;width:100%&quot; value=&quot;TEST DESC 1&quot;&gt;&lt;/td&gt;
              &lt;td&gt;PCS&lt;/td&gt;
              &lt;td class=&quot;totalqty&quot;&gt;5&lt;/td&gt;
              &lt;td&gt;&lt;input type=&quot;number&quot; step=&quot;0.01&quot; style=&quot;max-width:100px;&quot; value=&quot;0.00&quot; onkeyup=&quot;calculateprice()&quot; min=&quot;0&quot;
                      class=&quot;iprice tnum&quot; name=&quot;iprice&quot;&gt;&lt;/td&gt;
              &lt;td class=&quot;totalprice text-right&quot;&gt;0.00&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt; &lt;input onchange=&quot;enablereqinfo()&quot; id=&quot;row2&quot; type=&quot;checkbox&quot; name=&quot;dtrow&quot;&gt;&lt;/td&gt;
              &lt;td&gt;TEST 2&lt;/td&gt;
              &lt;td&gt;&lt;input type=&quot;text&quot; style=&quot;width:100%&quot; value=&quot;TEST DESC 2&quot;&gt;&lt;/td&gt;
              &lt;td&gt;M&lt;/td&gt;
              &lt;td class=&quot;totalqty&quot;&gt;7&lt;/td&gt;
              &lt;td&gt;&lt;input type=&quot;number&quot; step=&quot;0.01&quot; style=&quot;max-width:100px;&quot; value=&quot;0.00&quot; onkeyup=&quot;calculateprice()&quot; min=&quot;0&quot;
                      class=&quot;iprice tnum&quot; name=&quot;iprice&quot;&gt;&lt;/td&gt;
              &lt;td class=&quot;totalprice text-right&quot;&gt;0.00&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th colspan=&quot;6&quot;&gt;Sub Total&lt;/th&gt;
              &lt;th class=&quot;text-right subtotal&quot;&gt;0.00&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th colspan=&quot;6&quot;&gt;Discount&lt;/th&gt;
              &lt;th class=&quot;text-right&quot;&gt;&lt;input style=&quot;max-width:100px;&quot; onkeyup=&quot;calculatetotals()&quot; type=&quot;number&quot; value=&quot;0.00&quot;
                      class=&quot;discount text-right&quot;&gt;&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th colspan=&quot;6&quot;&gt;&lt;/th&gt;
              &lt;th class=&quot;text-right taxtotal&quot;&gt;0.00&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th colspan=&quot;6&quot;&gt;Net Amount&lt;/th&gt;
              &lt;th class=&quot;text-right netamount&quot;&gt;0.00&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th colspan=&quot;6&quot;&gt;Grand Total&lt;/th&gt;
              &lt;th class=&quot;text-right grandtotal&quot;&gt;0.00&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  <p><strong>Here is my Html:</strong></p>
  <pre><code>&lt;table class=&quot;table table-bordered&quot; id=&quot;purchasetable&quot;&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th colspan=&quot;7&quot; class=&quot;bg-secondary&quot;&gt;
                  Item Breakdown
              &lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr class=&quot;text-center&quot;&gt;
              &lt;th scope=&quot;col&quot;&gt;&lt;input type=&quot;checkbox&quot; onclick=&quot;checkallcabin(this)&quot; name=&quot;checkall&quot;
                      id=&quot;checkall&quot;&gt; &lt;/th&gt;
              &lt;th scope=&quot;col&quot;&gt;Item Name&lt;/th&gt;
              &lt;th scope=&quot;col&quot;&gt;Description&lt;/th&gt;
              &lt;th scope=&quot;col&quot;&gt;Qty&lt;/th&gt;
              &lt;th scope=&quot;col&quot;&gt;UM&lt;/th&gt;
              &lt;th scope=&quot;col&quot;&gt;Item Price&lt;/th&gt;
              &lt;th scope=&quot;col&quot;&gt;Total Price&lt;/th&gt;
              &lt;script&gt;
                  function checkallcabin(bx) {
                      for (var tbls = $('#purchasetable'), i = tbls.length; i--;)
                          for (var bxs = tbls[i].getElementsByTagName(&quot;input&quot;), j = bxs.length; j--;)
                              if (bxs[j].type == &quot;checkbox&quot;)
                                  bxs[j].checked = bx.checked;
                      setselect();
                  }
              &lt;/script&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
  
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  <p><strong>and my jquery:</strong></p>
  <pre><code>function getpurchasereqinfo(prid) {
      var val = (prid.value || prid.options[prid.selectedIndex].value);
  
      $.ajax({
              type: 'POST',
              url: '/dashboard/purchasing/quotation/get-prrequestinfo',
              data: {
                  &quot;refid&quot;: val,
                  &quot;transtype&quot;: $('#reqtype').val()
              },
              encode: true,
              dataType: 'json',
              headers: {
                  'X-CSRF-TOKEN': $('meta[name=&quot;csrf-token&quot;]').attr('content')
              },
          })
          .done(function (data) {
              var cnt = 0;
              $(&quot;#purchasetable &gt; tbody&quot;).empty();
  
              for (i in data.prrequestinfo) {
  
                  cnt = cnt + 1;
                  $(&quot;#purchasetable &gt; tbody&quot;).
                  append(&quot;&lt;tr&gt;&quot; +
                      &quot;&lt;td&gt; &lt;input onchange='enablereqinfo()' id='row&quot; + cnt +
                      &quot;' type='checkbox' name='dtrow'&gt;&lt;/td&gt;&quot; +
                      &quot;&lt;td&gt;&quot; + data.prrequestinfo[i]['item_name'] + &quot;&lt;/td&gt;&quot; +
                      &quot;&lt;td&gt;&lt;input type='text' style='width:100%' value='&quot;+ data.prrequestinfo[i]['idescription'] +&quot;'&gt;&lt;/td&gt;&quot; +
                      &quot;&lt;td&gt;&quot; + data.prrequestinfo[i]['um'] + &quot;&lt;/td&gt;&quot; +
                      &quot;&lt;td class='totalqty'&gt;&quot; + data.prrequestinfo[i]['quantity'] +
                      &quot;&lt;/td&gt;&quot; +
  
                      &quot;&lt;td&gt;&quot; +
                      &quot;&lt;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'&gt;&quot; +
                      &quot;&lt;/td&gt;&quot; +
  
                      &quot;&lt;td class='totalprice text-right'&gt;&quot; + '0.00' + &quot;&lt;/td&gt;&quot; +
  
                      &quot;&lt;/tr&gt;&quot;
                  );
              }
  
  
              $(&quot;#purchasetable &gt; tbody&quot;).
              append(
  
                  &quot;&lt;tr&gt;&quot; +
                  &quot;&lt;th colspan='6'&gt;Sub Total&lt;/th&gt;&quot; +
                  &quot;&lt;th class='text-right subtotal'&gt;0.00&lt;/th&gt;&quot; +
                  &quot;&lt;/tr&gt;&quot; +
                  &quot;&lt;tr&gt;&quot; +
                  &quot;&lt;th colspan='6'&gt;Discount&lt;/th&gt;&quot; +
                  &quot;&lt;th class='text-right'&gt;&lt;input style='max-width:100px;' onkeyup='calculatetotals()' type='number' value='0.00' style='width:100%; font-weight:bold;' class='discount text-right'&gt;&lt;/th&gt;&quot; +
                  &quot;&lt;/tr&gt;&quot; +
                  &quot;&lt;tr&gt;&quot; +
                  &quot;&lt;th colspan='6'&gt;&lt;/th&gt;&quot; +
                  &quot;&lt;th class='text-right taxtotal'&gt;0.00&lt;/th&gt;&quot; +
                  &quot;&lt;/tr&gt;&quot; +
                  &quot;&lt;tr&gt;&quot; +
                  &quot;&lt;th colspan='6'&gt;Net Amount&lt;/th&gt;&quot; +
                  &quot;&lt;th class='text-right netamount'&gt;0.00&lt;/th&gt;&quot; +
                  &quot;&lt;/tr&gt;&quot; +
                  &quot;&lt;tr&gt;&quot; +
                  &quot;&lt;th colspan='6'&gt;Grand Total&lt;/th&gt;&quot; +
                  &quot;&lt;th class='text-right grandtotal'&gt;0.00&lt;/th&gt;&quot; +
                  &quot;&lt;/tr&gt;&quot;
  
              );
          });
  }
  </code></pre>
  <p>Any idea? Thanks</p>