Question

首先，我想说谢谢那些开始这个领域的人 - Web开发。特别是编码很棒。我觉得很酷。好吧，我是职业的土木工程师，但编码是我的业余爱好空闲时间。现在我认真地考虑了提高我的工作效率以及我的团队。

我开发了这张桌子。通过乘以第5列和第5列的输入，我得到了计算第7列“数量”的答案。 6这太棒了（对不起，当我找到解决方案时，我太兴奋了。）

但是哪里被卡住了（让我感到沮丧！尽管多次尝试并找到其他解决方案或方法 - 这就是我接近的） - 第7列和第3行的总和。道达尔说'南'是奇怪的。我确定，我错了。我无法获得Amount列中行的总和。

感谢您耐心阅读我的问题。非常感谢您的帮助/意见/建议。任何改进都是最受欢迎的。

请访问我的小提琴网站https://jsfiddle.net/sandz/bxj38zps/1/，这会导致我开发的代码。或者看看下面

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<title>TABLE RETEST</title>
</head>
<body>

    <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" onclick="Calculate()" value="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').each(function(i) {
             totals[i] += parseInt($(this).html());
                });
            });
            $("#sum_table td.totalCol").each(function(i) {
            $(this).html("total:" + totals[i]);
             });

            });

        </script>
    </div>

</body>
</html>

Answer 1

那是因为

$(this).find('.rowDataSd').each(function(i) {
  totals[i] += parseInt($(this).html());
});

$(this).html()将返回表格单元格中的输入字段，而不是输入字段中的值。修改此位以迭代输入字段并获取它们的值。

// ".rowDataSd input" selects all inputs within elements that have class="rowDataSd"
$(this).find('.rowDataSd input').each(function(i) {
  // So "this" is now an input, so we can $(this).val() to get its value.
  // And in case there is no value, parseInt will return NaN, so we default to 0 in this case
  totals[i] += parseInt($(this).val()) || 0;
});

在行Javascript中输入计算后的列总和

1 个答案: