如何使用calculation jquery制作订单

Question

我想让每一行都有一个默认价格，该行中的所有输入都必须和*默认价格。这段代码可以工作，但我知道我有一个总的foreach行，我想要所有的行在一起。在这个例子中，我有两行。每行有4个输入，每个输入必须相加，并从输入中得到总数*每行的默认价格

​

// main function when page is opened
(function($) {
  $(function() {
    var tbl = $('#tbl_a');
    tbl.find('tr').each(function() {
      $(this).find('input[type=text]').bind("keyup", function() {
        calculateSum();
      });
    });

    function calculateSum() {
      var tbl = $('#tbl_a');
      tbl.find('tr').each(function() {
        var sum = 0;
        $(this).find('input[type=text]').not('.total').each(function() {
          if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);
          }
        });

        $(this).find('.total').val(sum.toFixed(2));
      });
    }
  });
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table name="tbl_a" id="tbl_a">
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td>Wit</td>
      <td>Bruin</td>
      <td>Kaiser</td>
      <td>Pistolet wit</td>
      <td>Pistolet bruin</td>
    </tr>
    <tr class="item">
      <td width="200">Hagelslag puur</td>
      <td class="price" width="80">1.00</td>
      <td class="q"><input type="text" name="data[Order][3][q][Wit]" id="dataOrder3qWit" value=""></td>
      <td class="q"> <input type="text" name="data[Order][3][q][Bruin]" id="dataOrder3qBruin" value=""></td>
      <td class="q"> <input type="text" name="data[Order][3][q][Kaizer]" id="dataOrder3qKaizer" value=""></td>
      <td class="q" data-extra="1"><input type="text" name="data[Order][3][q][PistWit]" id="dataOrder3qPistWit" value=""></td>
      <td class="q" data-extra="1"><input type="text" name="data[Order][3][q][PistBruin]" id="dataOrder3qPistBruin" value=""></td>
      <td>
        <input type="text" class="form-control total" name="at[total_1]" id="total_1" value="" placeholder="total" style="width:160px;" />
      </td>
    </tr>
    <tr class="item">
      <td width="200">Hagelslag melk</td>
      <td class="price" width="80">1.00</td>
      <td class="q"><input type="text" name="data[Order][4][q][Wit]" id="dataOrder4qWit" value=""></td>
      <td class="q"> <input type="text" name="data[Order][4][q][Bruin]" id="dataOrder4qBruin" value=""></td>
      <td class="q"> <input type="text" name="data[Order][4][q][Kaizer]" id="dataOrder4qKaizer" value=""></td>
      <td class="q" data-extra="1"><input type="text" name="data[Order][4][q][PistWit]" id="dataOrder4qPistWit" value=""></td>
      <td class="q" data-extra="1"><input type="text" name="data[Order][4][q][PistBruin]" id="dataOrder4qPistBruin" value=""></td>
      <td>

      </td>
    </tr>
</table>

<input type="text" class="form-control total" name="at[total_2]" id="total_2" value="" placeholder="total" style="width:160px;" />

​

Answer 1

我认为您希望将每行中的每个输入值相加。然后将所有的“class=”值相加。如果我是正确的，那么下面的代码可能会起作用。但尽量不要使用重复的id。我希望它能起作用。HTML：

<table name="tbl_a" id="tbl_a">
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td>Wit</td>
      <td>Bruin</td>
      <td>Kaiser</td>
      <td>Pistolet wit</td>
      <td>Pistolet bruin</td>
    </tr>
    <tr class="item">
      <td width="200">Hagelslag puur</td>
      <td class="price" width="80">1.00</td>
      <td class="q"><input type="text" name="data[Order][3][q][Wit]" id="dataOrder3qWit" value=""></td>
      <td class="q"> <input type="text" name="data[Order][3][q][Bruin]" id="dataOrder3qBruin" value=""></td>
      <td class="q"> <input type="text" name="data[Order][3][q][Kaizer]" id="dataOrder3qKaizer" value=""></td>
      <td class="q" data-extra="1"><input type="text" name="data[Order][3][q][PistWit]" id="dataOrder3qPistWit" value=""></td>
      <td class="q" data-extra="1"><input type="text" name="data[Order][3][q][PistBruin]" id="dataOrder3qPistBruin" value=""></td>
      <td>
        <input type="text" class="form-control total" name="at[total_1]" id="total_1" value="" placeholder="total" />
      </td>
    </tr>
    <tr class="item">
      <td width="200">Hagelslag melk</td>
      <td class="price" width="80">1.00</td>
      <td class="q"><input type="text" name="data[Order][4][q][Wit]" id="dataOrder4qWit" value=""></td>
      <td class="q"> <input type="text" name="data[Order][4][q][Bruin]" id="dataOrder4qBruin" value=""></td>
      <td class="q"> <input type="text" name="data[Order][4][q][Kaizer]" id="dataOrder4qKaizer" value=""></td>
      <td class="q" data-extra="1"><input type="text" name="data[Order][4][q][PistWit]" id="dataOrder4qPistWit" value=""></td>
      <td class="q" data-extra="1"><input type="text" name="data[Order][4][q][PistBruin]" id="dataOrder4qPistBruin" value=""></td>
      <td>
<input type="text" class="form-control total" name="at[total_2]" id="total_2" value="" placeholder="total"  />
      </td>
    </tr>

    <tr class="item">
      <td width="200">Hagelslag melk</td>
      <td class="price" width="80">1.00</td>
      <td class="q"><input type="text" name="data[Order][4][q][Wit]" id="dataOrder4qWit" value=""></td>
      <td class="q"> <input type="text" name="data[Order][4][q][Bruin]" id="dataOrder4qBruin" value=""></td>
      <td class="q"> <input type="text" name="data[Order][4][q][Kaizer]" id="dataOrder4qKaizer" value=""></td>
      <td class="q" data-extra="1"><input type="text" name="data[Order][4][q][PistWit]" id="dataOrder4qPistWit" value=""></td>
      <td class="q" data-extra="1"><input type="text" name="data[Order][4][q][PistBruin]" id="dataOrder4qPistBruin" value=""></td>
      <td>
<input type="text" class="form-control total" name="at[total_2]" id="total_2" value="" placeholder="total"  />
      </td>
    </tr>
</table>

<input type="text" id="finalTotal"  name="at[total_2]" placeholder="total"  /> 

Jquery：

// main function when page is opened
(function($) {
  $(function() {
    var tbl = $('#tbl_a');
    tbl.find('tr').each(function() {
      $(this).find('input[type=text]').bind("keyup", function() {
        calculateSum();

      });
    });

    function calculateSum() {
      var tbl = $('#tbl_a');
      tbl.find('tr').each(function() {
        var sum = 0;
        var total_sum = 0; // for final sum
        $(this).find('input[type=text]').not('.total').each(function() {
          if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);
          }
        });

        $(this).find('.total').val(sum.toFixed(2));

        // for final sum
          $('.total').each(function(){
            total_sum += parseFloat(this.value);
            $("#finalTotal").val(total_sum);
        });
      });
    }

  });
})(jQuery);