Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17385
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Somar inputs preenchidos e mostrar o total

28-02-2011 13:26

Esse é um script simples e eficiente onde o usuário vai preenchendo as linhas com valores, e automaticamente mostra o total em valor gasto.

<style>             body {                 font-family: sans-serif;             }             #summation {                 font-size: 18px;                 font-weight: bold;                 color:#174C68;             }             .txt {                 background-color: #FEFFB0;                 font-weight: bold;                 text-align: right;             }         </style>


<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">     <tr>         <td width="40px">1</td>         <td>Butter</td>         <td><input class="txt" type="text" name="txt"/></td>     </tr>     <tr>         <td>2</td>         <td>Cheese</td>         <td><input class="txt" type="text" name="txt"/></td>     </tr>     <tr>         <td>3</td>         <td>Eggs</td>         <td><input class="txt" type="text" name="txt"/></td>     </tr>     <tr>         <td>4</td>         <td>Milk</td>         <td><input class="txt" type="text" name="txt"/></td>     </tr>     <tr>         <td>5</td>         <td>Bread</td>         <td><input class="txt" type="text" name="txt"/></td>     </tr>     <tr>         <td>6</td>         <td>Soap</td>         <td><input class="txt" type="text" name="txt"/></td>     </tr>     <tr id="summation">         <td>&nbsp;</td>         <td align="right">Sum :</td>         <td align="center"><span id="sum">0</span></td>     </tr> </table>


<script src="jquery.js"></script> <script>     $(document).ready(function(){           //iterate through each textboxes and add keyup         //handler to trigger sum event         $(".txt").each(function() {               $(this).keyup(function(){                 calculateSum();             });         });       });       function calculateSum() {           var sum = 0;         //iterate through each textboxes and add the values         $(".txt").each(function() {               //add only if the value is number             if(!isNaN(this.value) && this.value.length!=0) {                 sum += parseFloat(this.value);             }           });         //.toFixed() method will roundoff the final sum to 2 decimal places         $("#sum").html(sum.toFixed(2));     } </script>

Fonte: http://viralpatel.net/blogs/2009/07/sum ... cript.html
0
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum :rock:

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado