jQuery/Javascript：表の列の合計（合計）を導出できません

Question

jQueryを使用して必要な結果を得ることができず、問題を調べて助言/提案する人がいますか？同じ。私は他の提案にもオープンしています。

<div class="w3-container w3-padding-4x w3-indigo"> 
    <h2> 
    Table Testing 
    </h2> 
</div> 

<div class="w3-container w3-section w3-pale-green"> 
    <table class="w3-table-all" id="sum_table" width="300" border="1"> 
     <tr class="titlerow"> 
      <th>SN</th> 
      <th>DESCRIPTION</th> 
      <TH>UNIT</TH> 
      <TH>REQD QTY</TH> 
      <TH>AVAIL. QTY</TH> 
      <TH>RATE</TH> 
      <TH>AMOUNT</TH> 
      <TH>REMARKS IF ANY</TH> 
     </tr> 

     <tr> 
      <td>1</td> 
      <td>Steel</td> 
      <td>Ton</td> 
      <td>200</td> 
      <td><input id="a.qty" type="number" oninput="calculate()" /></td> 
      <td><input id="rate" type="number" oninput="calculate()" /></td> 
      <td class="rowDataSd"><input id="amt1" type="number" name="amount" /></td> 
      <td><input type="text" name=""></td> 
     </tr> 

     <tr> 
      <td>2</td> 
      <td>Cement</td> 
      <td>Bags</td> 
      <td>300</td> 
      <td><input id="qty2" type="number" oninput="calculate1()" /></td> 
      <td><input id="rate2" type="number" oninput="calculate1()" /></td> 
      <td class="rowDataSd"><input id="amt2" type="number" name="amount" /></td> 
      <td><input type="text" name=""></td> 
     </tr> 
     <tr class="totalColumn"> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td class="totalCol"><input type="button" oninput="Calculate2()" name="Calculate"/> TOTAL:</td> 
      <td><input type="text" name=""></td> 
     </tr> 

    </table> 



    <script> 
     function calculate(){ 
      var x1 = document.getElementById('a.qty').value; 
      var x2 = document.getElementById('rate').value; 
      var x3 = document.getElementById('amt1').value; 
      var x4 = x1 * x2; 
      amt1.value = x4; 
     } 

     function calculate1() { 
      var y1 = document.getElementById('qty2').value; 
      var y2 = document.getElementById('rate2').value; 
      var y3 = document.getElementById('amt2').value; 
      var y4 = y1 * y2; 
      amt2.value = y4; 

     } 

      var totals = [0]; 

      $(document).ready(function() { 

      var $dataRows = $("#sum_table tr:not('.totalColumn, .titlerow')"); 

      $dataRows.each(function() { 
      $(this).find('.rowDataSd input').each(function(i) { 
       totals[i] += parseInt($(this).val()) || 0 
       }); 
      }); 
      $("#sum_table td.totalCol").each(function(i) { 
      $(this).value("total:" + totals[i]); 
       }); 

      }); 

      </script> 
     </div> 

     } 

あなたの容易な参照のための絵の形で結果を以下に示します。

Answer 1

私は私の質問のための解決策を見つけました。それは私をしばらく（よく、長いマイル）かかりました。私は解決策を見つけた。おそらく、あなたにとっても役立つかもしれません。

<script> 
     function calculate(){ 
      var x1 = document.getElementById('a.qty').value; 
      var x2 = document.getElementById('rate').value; 
      var x3 = document.getElementById('amt1').value; 
      var x4 = x1 * x2; 
      amt1.value = x4; 
      dototal(); 
     } 

     function calculate1() { 
      var y1 = document.getElementById('qty2').value; 
      var y2 = document.getElementById('rate2').value; 
      var y3 = document.getElementById('amt2').value; 
      var y4 = y1 * y2; 
      amt2.value = y4; 
      dototal(); 

     } 

     $(document).ready(function() { 

        dototal(); 
       }); 

      function dototal() 
       { 
        var totals = 0; 
        var $dataRows = $("#sum_table tr:not('.totalColumn, .titlerow')"); 

      $dataRows.each(function() { 
      $(this).find('.rowDataSd input').each(function (i) { 
       totals += parseInt($(this).val()) || 0 
        }); 
      }); 
       $("#sum_table td.totalCol").each(function (i) { 
       $(this).text("total:" + totals); 
      }); 

      } 

     </script>