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>