Discussion :

[OUZFA]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Toufik83]

Bonjour,

Votre code pourrait se résumer à

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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");
  });
}

[OUZFA]

Merci Toufik
c'est bien cela. Bravo !

[NoSmoking]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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");

[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().