Как подвести Jquery Выходы

Question

Я создал пару строк и умножаются некоторые данные, чтобы получить итоги:

Но я не знаю, как подвести все итоги и распечатать его в «Денежные средства в кассе» ряд.

Ниже приведены мои коды:

<script type="text/javascript"> 
 
$(document).ready(function() { 
 
    $('.row1').keyup(function(ev){ 
 
     
 
     var row1c = $(this).val() * 1000; 
 
     $('.row1c').html((row1c).toFixed(2)); 
 

 
    }); 
 
}); 
 
</script> 
 

 
<script type="text/javascript"> 
 
$(document).ready(function() { 
 
    $('.row2').keyup(function(ev){ 
 
     
 
     var row2c = $(this).val() * 500; 
 
     $('.row2c').html((row2c).toFixed(2)); 
 

 
    }); 
 
}); 
 
</script> 
 

 

 
<script type="text/javascript"> 
 
$(document).ready(function() { 
 
    $('.row3').keyup(function(ev){ 
 
     
 
     var row3c = $(this).val() * 100; 
 
     $('.row3c').html((row3c).toFixed(2)); 
 

 
    }); 
 
}); 
 
</script> 
 

 

 
<script type="text/javascript"> 
 
$(document).ready(function() { 
 
    $('.row4').keyup(function(ev){ 
 
     
 
     var row4c = $(this).val() * 50; 
 
     $('.row4c').html((row4c).toFixed(2)); 
 

 
    }); 
 
}); 
 
</script> 
 

 
<script type="text/javascript"> 
 
$(document).ready(function() { 
 
    $('.row5').keyup(function(ev){ 
 
     
 
     var row5c = (row1c+row2c+row3c+row4c); 
 
     $('.row5c').html((row5c).toFixed(2)); 
 

 
    }); 
 
}); 
 
</script>

<table border="2" cellpadding="5" cellspacing="2" align="center"> 
 
     
 
     <h3 align="center">Cash Position as on...... </h3> 
 
      <tr> 
 
        <th>Note</th> 
 
        <th>Quantity</th> 
 
        <th>Total</th> 
 
      </tr> 
 

 

 
      <tr> 
 
       <td>1000 Tk Note</td> 
 
       <td><input type="text" name="pages" class="row1" /></td> 
 
       <td><span class="row1c">0.00</span></td> 
 
      </tr> 
 

 
      <tr> 
 
       <td>500 Tk Note</td> 
 
       <td><input type="text" name="pages" class="row2" /></td> 
 
       <td><span class="row2c">0.00</span></td> 
 
      </tr> 
 

 
      <tr> 
 
       <td>100 Tk Note</td> 
 
       <td><input type="text" name="pages" class="row3" /></td> 
 
       <td><span class="row3c">0.00</span></td> 
 
      </tr> 
 

 
      <tr> 
 
       <td>50 Tk Note</td> 
 
       <td><input type="text" name="pages" class="row4" /></td> 
 
       <td><span class="row4c">0.00</span></td> 
 
      </tr> 
 

 

 

 

 

 
      <tr> 
 
       <td colspan ="2">Cash In Hand (Sum of All Totals)</td> 
 
      
 
       <td><span class="row5c">0.00</span></td> 
 
      </tr> 
 

 
    </table>

Все коды вместе здесь:

https://jsfiddle.net/rashelmiah/fb9opo36/1/

могли бы вы мне найти способ подвести все итоги? Спасибо заранее.

Answer 1

Вам необходимо добавить следующий код.

$('input[type=text]').keyup(function(){ 
    var total = 0; 
    $('input[type=text]').each(function(){ 
     total += Number($(this).parent().next().find('span').text()); 
    }) 
    $('.row5c').text(total); 
}) 

Примечание: Ваш код было много <script> тегов, которые были излишними. И много функции ready(), которая тоже не нужна. Вы можете обернуть весь код внутри одного тега <script> и одного ready().

Демо:

$(document).ready(function() { 
 
    $('.row1').keyup(function(ev){ 
 
     
 
     var row1c = $(this).val() * 1000; 
 
     $('.row1c').html((row1c).toFixed(2)); 
 

 
    }); 
 
    $('.row2').keyup(function(ev){ 
 
     
 
     var row2c = $(this).val() * 500; 
 
     $('.row2c').html((row2c).toFixed(2)); 
 

 
    }); 
 
    
 
    $('.row3').keyup(function(ev){ 
 
     
 
     var row3c = $(this).val() * 100; 
 
     $('.row3c').html((row3c).toFixed(2)); 
 

 
    }); 
 
    $('.row4').keyup(function(ev){ 
 
     
 
     var row4c = $(this).val() * 50; 
 
     $('.row4c').html((row4c).toFixed(2)); 
 

 
    }); 
 

 
    $('.row5').keyup(function(ev){ 
 
     
 
     var row5c = (row1c+row2c+row3c+row4c); 
 
     $('.row5c').html((row5c).toFixed(2)); 
 

 
    }); 
 
    
 
    $('input[type=text]').keyup(function(){ 
 
    var total = 0; 
 
    $('input[type=text]').each(function(){ 
 
     total += Number($(this).parent().next().find('span').text()); 
 
    }) 
 
    $('.row5c').text(total.toFixed(2)); 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border="2" cellpadding="5" cellspacing="2" align="center"> 
 

 
    <h3 align="center">Cash Position as on...... </h3> 
 
    <tr> 
 
    <th>Note</th> 
 
    <th>Quantity</th> 
 
    <th>Total</th> 
 
    </tr> 
 

 

 
    <tr> 
 
    <td>1000 Tk Note</td> 
 
    <td> 
 
     <input type="text" name="pages" class="row1" /> 
 
    </td> 
 
    <td><span class="row1c">0.00</span> 
 
    </td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>500 Tk Note</td> 
 
    <td> 
 
     <input type="text" name="pages" class="row2" /> 
 
    </td> 
 
    <td><span class="row2c">0.00</span> 
 
    </td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>100 Tk Note</td> 
 
    <td> 
 
     <input type="text" name="pages" class="row3" /> 
 
    </td> 
 
    <td><span class="row3c">0.00</span> 
 
    </td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>50 Tk Note</td> 
 
    <td> 
 
     <input type="text" name="pages" class="row4" /> 
 
    </td> 
 
    <td><span class="row4c">0.00</span> 
 
    </td> 
 
    </tr> 
 

 

 

 

 

 
    <tr> 
 
    <td colspan="2">Cash In Hand (Sum of All Totals)</td> 
 

 
    <td><span class="row5c">0.00</span> 
 
    </td> 
 
    </tr> 
 

 
</table>