0
votes

Puis-je totaliser chaque ligne dans la table, puis la désactivée avec une case à cocher?

J'ai des problèmes avec mon code. Le problème est que lorsque j'utilise chacun () code>, il boucle de la première cellule à la fin de la ligne et obtenez toute la valeur. Je veux juste que cela obtienne la valeur de chaque ligne, puis lorsque je lui donne un numéro spécifique, il calculera le total et l'impression à la fin de la ligne. Lorsque j'ai cliqué sur la case à cocher L'entrée code> code> sera activée et lorsque j'ai cliqué à nouveau, il sera désactivé et le texte dans son avec la somme totale disparaît également

p>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" id="product" class="class">
  <tr>
    <td>
    </td>
    <td>Product</td>
    <td>price</td>
    <td>amount</td>
    <td>Total</td>
  </tr>
  <tbody id="productbody">
    <tr>
      <td><input type="checkbox" id="check1" onClick="de()" />
      </td>
      <td>iPhone9</td>
      <td>700</td>
      <td><input type="text" id="text1" disabled /></td>
      <td></td>
    </tr>
    <tr>
      <td><input type="checkbox" id="check2" onClick="de()" />
      </td>
      <td>Samsung Star</td>
      <td>1500</td>
      <td><input id="text2" disabled></td>
      <td></td>
    </tr>
  </tbody>
</table>

javascript jquery

0 commentaires

3 Réponses :

1
votes

Veuillez essayer le code ci-dessous.

$(document).ready(function() {
  $("#productbody tr").find("input:text").change(function() {
    var tong = 0;
    var price = $(this).closest('tr').find("td:eq(2)").text();
    var amount = $(this).val();
    if (amount > 0) {
      tong = parseInt(price) * amount;
      $(this).closest('tr').find("td:eq(4)").text(tong);
    }
  });
});

0 commentaires

0
votes

Votre pour chacun devrait être comme celui-ci xxx

$ ("entrée: texte"). Modifier (fonction () { xxx

0 commentaires

0
votes

Votre problème est que vous êtes inutilement itération de toutes les lignes lorsque seule la quantité d'une seule ligne a changé. Ce que vous cherchez ici, c'est le contexte strong> du calcul: dans ce cas, le contexte est l'élément le plus proche code> et vous souhaitez effectuer des calculs à l'aide de l'information dans ce Rangée seulement.

Par conséquent, dans le changement de changement de l'entrée, tout ce dont vous avez besoin est: p>


 Obtenez la rangée de table parent. Ceci est fait en utilisant  $ (ceci) .Closest ('TR')  code>  li>
 Obtenez le prix et le montant des colonnes correctes de la ligne. Au lieu d'utiliser  parseint ()  code>, vous pouvez utiliser l'opérateur unaire  +  code> pour convertir une chaîne en numérique.  LI>
 ol>  Ceci devrait fonctionner:  p> 
  p> 


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" id="product" class="class">
  <tr>
    <td>
    </td>
    <td>Product</td>
    <td>price</td>
    <td>amount</td>
    <td>Total</td>
  </tr>
  <tbody id="productbody">
    <tr>
      <td><input type="checkbox" id="check1" onClick="de()" />
      </td>
      <td>iPhone9</td>
      <td>700</td>
      <td><input type="text" id="text1" disabled /></td>
      <td></td>
    </tr>
    <tr>
      <td><input type="checkbox" id="check2" onClick="de()" />
      </td>
      <td>Samsung Star</td>
      <td>1500</td>
      <td><input id="text2" disabled></td>
      <td></td>
    </tr>
  </tbody>
</table>
<script>
  function de() {

    document.getElementById('check1').onchange = function() {
      document.getElementById('text1').disabled = !this.checked;
    };
    document.getElementById('check2').onchange = function() {
      document.getElementById('text2').disabled = !this.checked;
    };

  }

</script>

0 commentaires