Dev Faq
0
votes

Faire une boucle for pour calculer des cellules spécifiques puis écrire le résultat dans la dernière cellule de la ligne

Je suis très nouveau dans JS et j'essaie d'apprendre les boucles for et dans ce cas, je veux transformer cela en une boucle for si possible. Je veux calculer une chaîne numérique statique dans la cellule 3, multiplier le nombre d'entrée dans la cellule 4 et sortir le résultat dans une nouvelle cellule 5 qui a été créée dans la boucle. Toute aide est très appréciée

var table = document.getElementById("table");

var Row1 = table.rows[1],
    cell1 = Row1.insertCell(5);
var Row2 = table.rows[2],
    cell2 = Row2.insertCell(5);
var Row3 = table.rows[3],
    cell3 = Row3.insertCell(5);
var Row4 = table.rows[4],
    cell4 = Row4.insertCell(5);
var Row5 = table.rows[5],
    cell5 = Row5.insertCell(5);
var Row6 = table.rows[6],
    cell6 = Row6.insertCell(5);

var x1 = table.rows[1].cells[4].getElementsByTagName('input')[0].value;
var y1 = table.rows[1].cells[3].innerHTML;
    cell1.innerHTML = y1 * x1;
var x2 = table.rows[2].cells[4].getElementsByTagName('input')[0].value;
var y2 = table.rows[2].cells[3].innerHTML;
    cell2.innerHTML = y2 * x2;
var x3 = table.rows[3].cells[4].getElementsByTagName('input')[0].value;
var y3 = table.rows[3].cells[3].innerHTML;
    cell3.innerHTML = y3 * x3;
var x4 = table.rows[4].cells[4].getElementsByTagName('input')[0].value;
var y4 = table.rows[4].cells[3].innerHTML;
    cell4.innerHTML = y4 * x4;
var x5 = table.rows[5].cells[4].getElementsByTagName('input')[0].value;
var y5 = table.rows[5].cells[3].innerHTML;
    cell5.innerHTML = y5 * x5;
var x6 = table.rows[6].cells[4].getElementsByTagName('input')[0].value;
var y6 = table.rows[6].cells[3].innerHTML;
    cell6.innerHTML = y6 * x6;

2 commentaires

Cela me trouble un peu, désolé: p Avez-vous du HTML d'accompagnement? Cela pourrait aider à voir avec quoi nous travaillons.

La dernière modification a supprimé le HTML ajouté précédemment, regardez les révisions pour plus de clarté. L'OP semble avoir copié-collé son nouveau code JS sur tout le code précédent (y compris le HTML), sans rajouter le dernier code HTML, sans vérifier ce qu'il remplace réellement. Déménagement assez discutable, à mon avis.

3 Réponses :

0
votes

Vous pouvez utiliser des boucles for comme celle donnée ci-dessous. On dirait que vous opérez sur des nombres, donc j'ai ajouté un + devant l'affectation de x1 et y1 pour les transtyper implicitement en nombres.

for(var i = 1; i <= 6; i++) {
  var firstRow = table.rows[i], cell = firstRow.insertCell(5);
  var x1 = +table.rows[i].cells[4].getElementsByTagName('input')[0].value;
  var y1 = +table.rows[i].cells[3].innerHTML;
  cell.innerHTML = y1 * x1;
}

0 commentaires
0
votes

Ceux-ci n'ont pas besoin d'être dans des fonctions mais simplement pour faciliter la lecture

function createCells() {
  cells = []
  for (let i = 1; i < 7; i++) {
    var cells[i] = table.rows[i].insertCell(5)
  }
}

function calculate() {
  for
  let (i = 1; i < 7; i++) {
    var x = table.rows[i].cells[4].getElementsByTagName('input')[0].value;
    var y = table.rows[i].cells[3].innerHTML;
    cells[i].innerHTML = (y * x);
  }
}

0 commentaires
0
votes

Une réponse courte utilisant un simple for -loop est la suivante:

  1. Boucle à travers chaque ligne
  2. Pour chaque ligne, multipliez la quantité par le prix
  3. Total de sortie dans la même ligne

Puisque nous voulons toujours avoir un champ "total" dans chaque ligne, nous pouvons l'ajouter directement dans le HTML.
Et puisque nous connaissons la position de l'élément prix et de l'élément quantité, nous pouvons y accéder en utilisant des valeurs fixes comme indices. 

<table id="pricetable">
  <thead>
    <tr>
      <th>Price</th>
      <th>Quantity</th>
      <th>Row-Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="price">6500</td>
      <td>
        <input class="quantity" type="number" min="0" max="999" value="1" />
      </td>
      <td class="total"></td>
    </tr>
    <tr>
      <td class="price">6200</td>
      <td>
        <input class="quantity" type="number" min="0" max="999" value="1" />
      </td>
      <td class="total"></td>
    </tr>
    <tr>
      <td class="price">4200</td>
      <td>
        <input class="quantity" type="number" min="0" max="999" value="1" />
      </td>
      <td class="total"></td>
    </tr>
    <tr>
      <td class="price">4000</td>
      <td>
        <input class="quantity" type="number" min="0" max="999" value="1" />
      </td>
      <td class="total"></td>
    </tr>
    <tr>
      <td class="price">2800</td>
      <td>
        <input class="quantity" type="number" min="0" max="999" value="1" />
      </td>
      <td class="total"></td>
    </tr>
    <tr>
      <td class="price">3500</td>
      <td>
        <input class="quantity" type="number" min="0" max="999" value="1" />
      </td>
      <td class="total"></td>
    </tr>
  </tbody>
</table>
function clamp(min, value, max) {
  return Math.max(min, Math.min(value, max));
}

for (let row of document.querySelectorAll("#pricetable tbody tr")) {
  updateRowTotal(row);
  row.querySelector("input.quantity").addEventListener("input", evt => {
    // Add '/*' before this comment to "remove" this extra part
    // The 5 lines below are to clamp 'value' between 'min' and 'max'
    let min = parseInt(evt.target.getAttribute("min"));
    let max = parseInt(evt.target.getAttribute("max"));
    if (isNaN(min)) min = Number.MIN_SAFE_INTEGER;
    if (isNaN(max)) max = Number.MAX_SAFE_INTEGER;
    evt.target.value = clamp(min, evt.target.value, max);
    // */
    updateRowTotal(evt.target.closest("tr"));
  });
}

function updateRowTotal(row) {
  row.querySelector(".total").innerHTML = row.querySelector(".price").innerHTML * row.querySelector(".quantity").value;
}

Remarque: Lors du changement de la position de ces éléments (par exemple en ajoutant une nouvelle colonne en face d'eux), leur index se déplacerait. Cela vous obligerait à mettre à jour manuellement les index dans le fichier JS.
Vous pouvez vous faciliter la tâche en utilisant cette simple "astuce":
Ajoutez des classes spécifiques aux éléments (par exemple .price , .quantity , .total ), vous permettant de les trouver facilement en utilisant Element.querySelector() .

Remarque: le script ne s'exécute qu'une seule fois, la première fois que la page est chargée. Cela signifie que la saisie d'une quantité différente ne mettra pas à jour le champ "total". Pour cela, nous avons besoin d'un EventListener .

Une autre approche
En observant la boucle for, nous pouvons voir:

  • On accède à une seule ligne pour chaque itération
  • L'ordre dans lequel nous accédons à chaque ligne n'est pas pertinent

Puisque ces deux points sont vérifiés, nous pouvons utiliser un for ... of -loop (également appelé foreach -loop ou amélioré pour -loop). Un for ... of -loop est (à mon avis) plus facile à lire, et raconte ce que nous avons vérifié en utilisant la liste ci-dessus par lui-même.
Remarque: méfiez-vous de la différence entre le for ... of-loop et le for ... in-loop .

Maintenant, nous pourrions calculer le total sur-le-champ dans la boucle, mais en pensant à l'avenir, nous voulons effectuer à nouveau le même calcul lors de la saisie d'une nouvelle valeur de quantité. Nous pouvons réduire le code dupliqué en faisant du calcul une fonction updateRowTotal() , ce qui facilite le débogage et la compréhension du code.

Pour réellement mettre à jour le total lors de la saisie d'une nouvelle valeur de quantité, nous pouvons utiliser un EventListener qui appelle une fonction automatiquement lorsqu'une nouvelle valeur est entrée dans le champ <input> (en appelant updateRowTotal(evt.target.closest("tr")) ). 

<table id="pricetable">
  <thead>
    <tr>
      <th>Number</th>
      <th>Product</th>
      <th>Brand</th>
      <th>Price</th>
      <th>Quantity</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>23456789</td>
      <td>Phone</td>
      <td>Apple</td>
      <td>6500</td>
      <td>
        <input type="text" size="3" value="1" />
      </td>
      <td></td>
    </tr>
    <tr>
      <td>22256289</td>
      <td>Phone</td>
      <td>Samsung</td>
      <td>6200</td>
      <td>
        <input type="text" size="3" value="1" />
      </td>
      <td></td>
    </tr>
    <tr>
      <td>24444343</td>
      <td>Phone</td>
      <td>Huawei</td>
      <td>4200</td>
      <td>
        <input type="text" size="3" value="1" />
      </td>
      <td></td>
    </tr>
    <tr>
      <td>19856639</td>
      <td>Tablet</td>
      <td>Apple</td>
      <td>4000</td>
      <td>
        <input type="text" size="3" value="1" />
      </td>
      <td></td>
    </tr>
    <tr>
      <td>39856639</td>
      <td>Tablet</td>
      <td>Samsung</td>
      <td>2800</td>
      <td>
        <input type="text" size="3" value="1" />
      </td>
      <td></td>
    </tr>
    <tr>
      <td>12349862</td>
      <td>Tablet</td>
      <td>Huawei</td>
      <td>3500</td>
      <td>
        <input type="text" size="3" value="1" />
      </td>
      <td></td>
    </tr>
  </tbody>
</table>
var rows = document.querySelectorAll("#pricetable tbody tr");
for (var i = 0; i < rows.length; ++i) {
  var price = rows[i].children[3].innerHTML;
  var quantity = rows[i].children[4].children[0].value;
  var total = price * quantity; // Implicit type-casting to numbers
  rows[i].children[5].innerHTML = total;
}

Sidenote
Faire le champ <input> de type="number" empêche tout caractère non numérique à entrer.
Et comme les attributs min - et max empêchent uniquement la soumission de formulaire, nous devons coder nous-mêmes le blocage de la valeur. Cela se fait facilement en lisant les valeurs des attributs et en fixant la valeur à leur plage définie. Notez que nous avons ajouté des valeurs par défaut pour min et max , étant la valeur entière sûre la plus basse et la plus haute.

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO