jquery: obtient et ajoute des données à une structure de table

Question

Ceci est ma structure de tables.

<table> 
    <tr> 
     <td> 
     <input type="text"> 1 </input> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <input type="text"> 1 </input> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <div class="sum"> </div> 
     </td> 
    </tr> 

J'ai un événement onblure sur le champ de saisie

($("input[type=\"text\"]").blur(function()...) 

Maintenant, je veux obtenir les valeurs des inputfields si l'un d'entre eux donne l'événement flou. Ajoutez ces valeurs et publiez-les dans la div sum. Une idée?

Answer 1

Vous voudrez probablement ajouter quelques attributs class et/ou id à vos entrées de sorte que ce code jouera bien s'il est déposé dans un contexte HTML plus large. Cependant, pour répondre à la question donnée:

$("input[type=text]").blur(function() { 
    var sum = 0; 
    $("input[type=text]").each(function() { // For each of the two inputs 
     sum += parseInt($(this).val())  // ... add its value to sum 
    }); 
    $("div.sum").text(sum);     // Update the div 
}); 

Si vous entrez des nombres avec une virgule décimale, vous voudrez probablement utiliser parseFloat plutôt que parseInt.

MISE À JOUR: Si vos structures sont tous comme celui affiché, la meilleure façon de les relier les uns aux autres serait d'utiliser un attribut id sur la table contenant, et la syntaxe du sélecteur de descendant. Ensuite, le code ressemblerait à ceci:

$("input[type=text]").blur(function() { 
    var parentId = $(this).parents('table').attr('id'); 
    var sum = 0; 
    $(parentId +" input[type=text]").each(function() { 
     sum += parseInt($(this).val()) 
    }); 
    $(parentdId + " div.sum").text(sum); 
}); 

MISE À JOUR DE NOUVEAU: D'accord, vous avez donc aucun moyen d'assigner ids à vos tables. C'est bon, nous pouvons toujours faire cela. Vous devrez utiliser les fonctions de parcours de jQuery parent() et find() au lieu de simples sélecteurs, c'est tout.

$("input[type=text]").blur(function() { 
    var parent = $(this).parents('table'); 
    var sum = 0; 
    parent.find("input[type=text]").each(function() { 
     sum += parseInt($(this).val()) 
    }); 
    parent.find("div.sum").text(sum); 
}); 

Answer 2

$(document).ready (function() { 
      $("input[type='text']").blur(function() { 
       CalculateSum(); 
      }); 
     }); 

     function CalculateSum() 
     { 
      var sum = 0; 

      $("#tableID input[type='text']").each (function() {    
       if (!isNaN ($(this).val())) 
       { 
        sum += parseFloat ($(this).val()); 
       } 
      }); 

      $(".sum").text (sum); 
      // If you can give the div an id and fill the value. 
      //$("#sum").text (sum); 
     }