if dans boucle for

Version imprimable

if dans boucle for

Bonjour à tous
j'ai des tables dans un formulaire qui ont des <tbody> composés de 6 inputs chacun. Chaque <tbody> comprend un nombre différent de <tr>(il y'en a qui ont 1 <tr>, il'y'en a qui ont 2 ou 3 <tr>).
Chaque <tr> comprend 6 <input>.
je souhaite appliquer à chaque <tr>de chaque <tbody> de chaque <table> une fonction qui met les bordures des inputs de chaque <tr> en dashedsi les 6 <input> sont vides

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<table name="myTable_name" id="myTable1">
<thead>
<tr>
<td>
<input type="text"  name="sum">
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="input1_myTable1">
<input type="text" name="input2_myTable1">
<input type="text" name="input3_myTable1">
<input type="text" name="input4_myTable1">
<input type="text" name="input5_myTable1">
<input type="text" name="input6_myTable1">
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<input type="text"  name="percent">
</td>
</tr>
</tfoot>
</table>
<script>
function dash_border(el){
 
  var myTable= document.getElementById(el);
      var myTable_body=myTable.tBodies[0]; 
        var myTable_body_length = myTable_body.rows.length;
        
 
  for(var i=0;i<myTable_body_length ;i++){
  var input1=myTable_body.rows[i].getElementsByTagName('input')[1];
  var input2=myTable_body.rows[i].getElementsByTagName('input')[2];
  var input3=myTable_body.rows[i].getElementsByTagName('input')[3];
  var input4=myTable_body.rows[i].getElementsByTagName('input')[4];
  var input5=myTable_body.rows[i].getElementsByTagName('input')[5];
  var input6=myTable_body.rows[i].getElementsByTagName('input')[6];
if(input1.value =="" && input2.value =="" && input3.value =="" && input4.value =="" && input5.value =="" && input6.value ==""){
     case_gris.focus();
     input1.style.border="1px dashed red";
     input2.style.border="1px dashed red";
     input2.style.border="1px dashed red";
     input4.style.border="1px dashed red";
     input5.style.border="1px dashed red";
     input6.style.border="1px dashed red";
 
   }
 
}
}
 
</script>

Chaque que j'applique la fonction à une table, le code ne s'exécute que sur le premier <tr> (seulement les bordures des inputs du premier <tr> deviennent "pointillé") .
Auriez-vous une explication ? Quelqu'un pourrait me donner la solution, svp ?
Merci

Bonjour,

Votre code pourrait se résumer à

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function dash_border(el) {
  var myTable = document.getElementById(el),
    myTable_body = myTable.tBodies[0];
  [...myTable_body.rows].forEach(row => {
    //récupérer les inputs vides
    let inputsOfRow = row.querySelectorAll('input'),
      emptyInputs = [...inputsOfRow].filter(input => input.value == "");
    //Comparer le nombre des inputs filtrés (vides) avec le nombre total des inputs de la ligne, s'ils sont égaux, ceci dit que toute la ligne est vide.
    if (emptyInputs.length == inputsOfRow.length)
      inputsOfRow.forEach(input => input.style.border = "1px dashed red");
  });
}

14/02/2024, 10h57
OUZFA

Merci Toufik
c'est bien cela. Bravo !

Bonjour,
on aurait également pu utiliser la méthode reduce, qui s'adapte bien ici et placer une classe CSS sur le parent des <input>.

Par exemple :
Code:

1 2 3 4 5 const elRef = document.getElementById("id-element"); // ou les rows const inputs = elRef.querySelectorAll("input"); const allValues = [...inputs].reduce((result, input) => result + input.value, ""); // add/remove suivant allValues elRef.classList[allValues ? "remove" : "add"]("inputs-empty");

14/02/2024, 22h47
Toufik83

Tout propre NoSmoking ;), j'avais pensé aussi à reduce, mais je l'ai quitté au dernier moment...

Sinon OUZFA il me semble qu'il faut appliquer la bordure rouge seulement aux zones de texte vides, mais pas toutes les zones de la ligne..., non?

Ne pas oublier aussi de supprimer les espaces au début et à la fin de la chaîne avec trim().