将输入值乘以数据值，然后将结果求和

Question

I have nine inputs text and I need to multiply the input value by data-value of each input and then sum the results and display ir on the div.

Input value-1 x data-value-1
+
Input value-2 x data-value-2
+
Input value-3 x data-value-3

... until 9

My code and how far I've gotten:

DEMO

 $(function() { $('.insert').on('keydown', '.quantity-input', function(e){-1!==$.inArray(e.keyCode,[46,8,9,27,13,110,190])||/65|67|86|88/.test(e.keyCode)&&(!0===e.ctrlKey||!0===e.metaKey)||35<=e.keyCode&&40>=e.keyCode||(e.shiftKey||48>e.keyCode||57<e.keyCode)&&(96>e.keyCode||105<e.keyCode)&&e.preventDefault()}); }) $(".quantity-input").change(function(){ if($(this).val()=="") $(this).val(0); var total = 0; $(".quantity-input").each(function(index,element){ if ($(element).val()) { total+= parseInt($(element).val()); } }); $(".subtotal strong").text(total); }); $('.quantity-input').keyup(function(event) { var b = $(this).val(); var c = $(this).data('value'); var d = b * c alert(d) }); 

 table { width: 100%; } table th { text-align: center; } table td { padding: 10px; width: 10%; } table td input { width: 100%; text-align: center; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> <th>8</th> <th>9</th> </tr> </thead> <tbody> <tr> <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> </tr> <tr> <td class="subtotal" colspan="9">subtotal: <strong>00</strong></td> </tr> <tr> <td class="total" colspan="9">Total: <strong>00</strong></td> </tr> </tbody> </table> 

Answer 1

The idea is to on change of an input, you update the subtotal and total.

inside the $(".quantity-input").each subtotal will be the sum of all input, and total will be all input with correspond data-value.

 $(function() { $('.insert').on('keydown', '.quantity-input', function(e) { -1 !== $.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) || /65|67|86|88/.test(e.keyCode) && (!0 === e.ctrlKey || !0 === e.metaKey) || 35 <= e.keyCode && 40 >= e.keyCode || (e.shiftKey || 48 > e.keyCode || 57 < e.keyCode) && (96 > e.keyCode || 105 < e.keyCode) && e.preventDefault() }); }) $('.quantity-input').on('change', function(event) { if ($(this).val() == "") $(this).val(0); var subtotal = 0; var total = 0; $(".quantity-input").each(function(index, element) { if ($(element).val()) { subtotal += parseInt($(element).val()); total += parseInt($(element).val() * $(this).data('value')); } }); $(".subtotal > strong").text(subtotal); $(".total > strong").text(total); }); 

 table { width: 100%; } table th { text-align: center; } table td { padding: 10px; width: 10%; } table td input { width: 100%; text-align: center; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> <th>8</th> <th>9</th> </tr> </thead> <tbody> <tr> <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> </tr> <tr> <td class="subtotal" colspan="9">subtotal: <strong>00</strong></td> </tr> <tr> <td class="total" colspan="9">Total: <strong>00</strong></td> </tr> </tbody> </table> 

Answer 2

To make it simple I used input event for the input

 $(document).ready(function() { $(".quantity-input").on('input',function(){ var subtotal = 0; var total = 0; $(".quantity-input").each(function(index,element){ if ($(element).val()) { subtotal += parseInt($(element).val()); total += parseInt($(element).val()) * parseInt($(element).data('value')); } }); $(".subtotal strong").text(subtotal); $(".total strong").text(total); }); }); 

 table { width: 100%; } table th { text-align: center; } table td { padding: 10px; width: 10%; } table td input { width: 100%; text-align: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> <th>8</th> <th>9</th> </tr> </thead> <tbody> <tr> <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> </tr> <tr> <td class="subtotal" colspan="9">subtotal: <strong>00</strong></td> </tr> <tr> <td class="total" colspan="9">Total: <strong>00</strong></td> </tr> </tbody> </table> 

Additional Information you can combine event functions input , change ... etc

like $(".quantity-input").on('input change',function(){

Answer 3

I hope this is what you are trying to achieve.

 $(function() { $('.insert').on('keydown', '.quantity-input', function(e) { -1 !== $.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) || /65|67|86|88/.test(e.keyCode) && (!0 === e.ctrlKey || !0 === e.metaKey) || 35 <= e.keyCode && 40 >= e.keyCode || (e.shiftKey || 48 > e.keyCode || 57 < e.keyCode) && (96 > e.keyCode || 105 < e.keyCode) && e.preventDefault() }); }) $(".quantity-input").on('keyup', function() { if ($(this).val() == "") $(this).val(0); var subtotal = 0; var total = 0; // accounts for data attr values $(".quantity-input").each(function(index, element) { element = $(element); if (element.val()) { subtotal += parseInt(element.val()); total += parseInt(element.val()) * element.data('value'); } }); $(".subtotal strong").text(subtotal); $(".total strong").text(total); }); 

 table { width: 100%; } table th { text-align: center; } table td { padding: 10px; width: 10%; } table td input { width: 100%; text-align: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> <th>8</th> <th>9</th> </tr> </thead> <tbody> <tr> <td class="insert"> <input type="text" class="quantity-input" data-value="5" value="0"> </td> <td class="insert"> <input type="text" class="quantity-input" data-value="5" value="0"> </td> <td class="insert"> <input type="text" class="quantity-input" data-value="5" value="0"> </td> <td class="insert"> <input type="text" class="quantity-input" data-value="5" value="0"> </td> <td class="insert"> <input type="text" class="quantity-input" data-value="5" value="0"> </td> <td class="insert"> <input type="text" class="quantity-input" data-value="5" value="0"> </td> <td class="insert"> <input type="text" class="quantity-input" data-value="5" value="0"> </td> <td class="insert"> <input type="text" class="quantity-input" data-value="5" value="0"> </td> <td class="insert"> <input type="text" class="quantity-input" data-value="5" value="0"> </td> </tr> <tr> <td class="subtotal" colspan="9">subtotal: <strong>00</strong></td> </tr> <tr> <td class="total" colspan="9">Total: <strong>00</strong></td> </tr> </tbody> </table> 

Answer 4

I tried reading your code... But I found it quite confusing and awkward. This code should produce the described outcome. Hope it helps :)

var a = 0,
    b = 0,
    c = 0,
    d = 0;

$(".quantity-input").keyup(function(){
    $(".quantity-input").each(function(){
        // a holds value of input
        a = parseInt($(this).val()); 
        // b holds multiple of value and data-value
        b = a * $(this).data("value");
        console.log(b);
        // c holds subtotal
        c += a;
        // d holds total
        d += b;
    });
    $(".subtotal strong").html(c);
    $(".total strong").html(d);
});