Partage

Sélection d'un ligne en vue d'effaccer les données

14 février 2025 à 9:21:02

Bonjour,

Dans le code joint, je n'arrive pas à effacer la ligne sélectionnée, mon code JS efface tout le tableau

Les boutons "reset" sont de type "reset", et je crois que c'est une première erreur, mais même en le modifiant en type "button", mon code JS ne fonctionne pas

Auriez vous une idée svp

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>SIMAG-Gestion des articles</title>
  <link rel="stylesheet" href="css/components.css">
  <link rel="stylesheet" href="css/icons.css">
  <link rel="stylesheet" href="css/responsee.css">
  <link rel="stylesheet" href="css/template-style.css">
  <link rel="stylesheet" href="css/pages.css">
  <link rel="stylesheet" href="css/general.css">
  <link href='https://fonts.googleapis.com/css?family=Playfair+Display&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
  <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui.min.js"></script>
  <!-- <script src="../js/clicDroit.js"></script> -->
  <script src="../js/script.js" defer></script>
  <title>Budget</title>
</head>

<body>
  <header>
    <!-- Barre de navigation -->
    <nav class="background-transparent background-transparent-hightlight full-width sticky">
      <div class="s-12 l-2">
        <a href="index.html" class="logo">
          <!-- Logo White Version -->
          <img class="logo-white" src="img/simag.png" alt="">
          <!-- Logo Dark Version -->
          <img class="logo-dark" src="img/logo-dark.png" alt="">
        </a>
      </div>
      <div class="top-nav s-12 l-10">
        <ul class="right chevron">
          <li><a href="extranet.php">Home</a>
          <li><a href="products.html">Products</a>
            <ul>
              <li><a>Create</a></li>
              <li><a>Update</a></li>
              <li><a>List</a></li>
            </ul>
          </li>
          <li><a>Orders</a>
            <ul>
              <li><a>Suppliers</a>
                <ul>
                  <li><a>Service 1 A</a></li>
                  <li><a>Service 1 B</a></li>
                </ul>
              </li>
              <li><a>Clients</a></li>
            </ul>
          </li>
          <li><a href="about.html">About</a></li>
          <li><a href="gallery.html">Gallery</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </div>
    </nav>  </header>
  <br>
  <style>
    .tg {
      border-collapse: collapse;
    }

    .tg td {
      padding: .3em;
      border: 1px solid;
    }

    /* Ligne pair */
    .tg tr {
      background-color: #D2D6D9;
      height: 30px;
      font-weight: bold;
    }

    /* Ligne impair*/
    .tg tr:nth-child(even) {
      background-color: #A8ADB4;
      font-weight: bold;
    }

    .tg thead th {
      background-color: #7B858A;
      color: white;
    }

    .tg th {
      background-color: #CBD1D4;
      color: white;

    }

    .inp1 {
      width: 70px;
    }

    .inp2 {
      width: 70px;
      font-weight: bold;
    }

    .th1 {
      width: 80px;
    }

    /*Mise en page des boutons destinés aux pages intérieurs*/
    .btn1 {
      border: 0;
      line-height: 2.5;
      padding: 0 20px;
      font-size: 1rem;
      text-align: center;
      color: #fff;
      text-shadow: 1px 1px 1px #000;
      border-radius: 10px;
      background-color: rgb(220 0 0 / 100%);
      background-image: linear-gradient(to top left,
          rgb(0 0 0 / 20%),
          rgb(0 0 0 / 20%) 30%,
          rgb(0 0 0 / 0%));
      box-shadow:
        inset 2px 2px 3px rgb(255 255 255 / 60%),
        inset -2px -2px 3px rgb(0 0 0 / 60%);
    }

    .styled:hover {
      background-color: rgb(255 0 0 / 100%);
    }

    .styled:active {
      box-shadow:
        inset -2px -2px 3px rgb(255 255 255 / 60%),
        inset 2px 2px 3px rgb(0 0 0 / 60%);
    }
  </style>
  <script>
    // Afficher ou masquer le tableau des recettes
    var hide = true;

    function showcomment() {
      if (hide) {
        document.getElementById("zonecomment").style.display = 'block';
        hide = false;
      } else {
        document.getElementById("zonecomment").style.display = 'none';
        hide = true;
      }
    }
    // Afficher ou masquer le tableau des dépenses
    var hide = true;

    function showcomment1() {
      if (hide) {
        document.getElementById("zonecomment1").style.display = 'block';
        hide = false;
      } else {
        document.getElementById("zonecomment1").style.display = 'none';
        hide = true;
      }
    }
  </script>

  <!-- Barre de navigation de la page 
  <nav class="background-transparent background-transparent-hightlight full-width sticky">
    <style>
  .navIntern{
    width: 100%;
  }
</style>
<nav class="navIntern">
      <div class="top-nav s-12 l-10">
        <ul class="right chevron">
          <li><a href="extranet.php">Home</a>
          <li><a href="products.html">Products</a>
            <ul>
              <li><a>Create</a></li>
              <li><a>Update</a></li>
              <li><a>List</a></li>
            </ul>
          </li>
          <li><a>Orders</a>
            <ul>
              <li><a>Suppliers</a>
                <ul>
                  <li><a>Service 1 A</a></li>
                  <li><a>Service 1 B</a></li>
                </ul>
              </li>
              <li><a>Clients</a></li>
            </ul>
          </li>
          <li><a href="about.html">About</a></li>
          <li><a href="gallery.html">Gallery</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </div> 
    </nav>-->

  <br>
  <a name="comment"></a>
  <a onclick="showcomment()" style="cursor:pointer">
    <div><button>+</button></div>
  </a>
  <div id="zonecomment" style="display:block">
    <table id="tableau" class="tg">
      <form name="recettes" id="recettes">
        <thead>
          <tr>
            <th style="width: 2px;">*</th>
            <th class="th1">Libelle</th>
            <th>Janvier</th>
            <th>Février</th>
            <th>Mars</th>
            <th>Avril</th>
            <th>Mai</th>
            <th>Juin</th>
            <th>Juillet</th>
            <th>Auot</th>
            <th>Septembre</th>
            <th>Octobre</th>
            <th>Novembre</th>
            <th>Décembre</th>
            <th>Total</th>
            <th></th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <td colspan="2">Total recettes</td>
            <td><input type="text" class="inp2" name="somme" id="somme" value="" readonly></td>
            <td><input type="text" class="inp2" name="somme" id="somme" value="" readonly></td>
            <td><input type="text" class="inp2" name="somme" id="somme" value="" readonly></td>
            <td><input type="text" class="inp2" name="somme" id="somme" value="" readonly></td>
            <td><input type="text" class="inp2" name="somme" id="somme" value="" readonly></td>
            <td><input type="text" class="inp2" name="somme" id="somme" value="" readonly></td>
            <td><input type="text" class="inp2" name="somme" id="somme" value="" readonly></td>
            <td><input type="text" class="inp2" name="somme" id="somme" value="" readonly></td>
            <td><input type="text" class="inp2" name="somme" id="somme" value="" readonly></td>
            <td><input type="text" class="inp2" name="somme" id="somme" value="" readonly></td>
            <td><input type="text" class="inp2" name="somme" id="somme" value="" readonly></td>
            <td><input type="text" class="inp2" name="somme" id="somme" value="" readonly></td>
            <td><input type="text" class="inp2" name="somme" id="total" value="" readonly></td>
            <td><input type="button" class="inp2" value=""></td>
          </tr>
        </tfoot>
        <tbody>
                      <tr>
              <td>1</td>
              <td>CNAV DOM</td>
              <td class="valeur"><input type="text" class="inp1" name="inp1" id="inp1" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="inp1" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="f03" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="f04" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="f05" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="f06" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="f07" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="f08" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="f09" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="f010" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="f011" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="f012" value=""></td>
              <td class="somme"><input type="text" class="inp1" id="sum1" value="" readonly></td>
              <td style="width: 70px;"><input type="reset" style="width: 70px;" id="bntReset" value="Reset"></td>
            </tr>
                      <tr>
              <td>2</td>
              <td>CNAV MAG</td>
              <td class="valeur"><input type="text" class="inp1" name="inp1" id="inp1" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="inp1" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="f03" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="f04" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="f05" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="f06" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="f07" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="f08" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="f09" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="f010" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="f011" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="f012" value=""></td>
              <td class="somme"><input type="text" class="inp1" id="sum1" value="" readonly></td>
              <td style="width: 70px;"><input type="reset" style="width: 70px;" id="bntReset" value="Reset"></td>
            </tr>
                      <tr>
              <td>3</td>
              <td>AGRIC DOM</td>
              <td class="valeur"><input type="text" class="inp1" name="inp1" id="inp1" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="inp1" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="f03" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="f04" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="f05" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="f06" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="f07" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="f08" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="f09" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="f010" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="f011" value=""></td>
              <td class="valeur"><input type="text" class="inp1" id="f012" value=""></td>
              <td class="somme"><input type="text" class="inp1" id="sum1" value="" readonly></td>
              <td style="width: 70px;"><input type="reset" style="width: 70px;" id="bntReset" value="Reset"></td>
            </tr>
 
                  </tbody>
      </form>
    </table>
  </div>

  <script>
    // effacer les données des input de la ligne
    var ireset = document.querySelectorAll(".inp1");
    for (var i = 0; i < ireset; i++) {
    window.onload = function() {
      document.getElementById('btnReset').onclick = function() {
        document.getElementById('inp1')[i].reset();
      }
    }}
  </script>

</body>

</html>

-
Edité par DominiqueSimon5 14 février 2025 à 10:04:02

Domi65

15 février 2025 à 18:44:57

Bonjour.

Déjà, le HTML ne va pas : un identifiant st UNIQUE, hors tu as une douzaine d'éléments qui ont comme id "somme" et une autre qui ont comme id "btnReset".

Autre chose, le formulaire devrait contenir le tableau et non l'inverse.

Pour le JS, vite vu, tu fais

document.getElementById('inp1')[i].reset

Or getElementById ne renvoie pas un tableau mais un seul élément. Donc ça ne peut pas fonctionner.

Ouvre la console de débogage (F12). Les erreurs y seront signalées.

de toute façon, le code ne modifie pas le comportement de tes boutons rest, qui, tous, font simplement ce qui leur est demandé, un reset général du formulaire.

EDIT :

voici une méthode parmi d'autres pour faire un reset des inputs d'une ligne via un bouton qui est placé sur cette même ligne, sans modifier ta structure :

un gestionnaire appelle une fonction pour chaque click sur un bouton reset

cette fonction commence par annuler l'action prévue (le plus simple serait de ne pas utiliser de bouton reset, en fait). Puis, elle recherche l'élément "tr" parent du bouton et pour chacun des inputs qu'elle contient, supprime sa valeur, ou plus exactement la remplace par une chaîne vide.

Ce code, pour être compris, demande à comprendre deux notions JS bien pratiques, en plus de event.preventDefault et element.closest :

- queryselectorAll

- les boucles for of

for(let btn of document.querySelectorAll('[type=reset]')) {
    btn.onclick = function() {
	event.preventDefault();
    for(let input of this.closest('tr').querySelectorAll('input')) 
	    input.value = '';
    }
}

Bon apprentissage.

-
Edité par Domi65 15 février 2025 à 19:18:39

DominiqueSimon5

16 février 2025 à 9:32:18

Bonjour,

Je m'incline devant ton expérience et te remercie infiniment.

Cela fonctionne en effet, mais je vois que je dois continuer à comprendre le JS

Encore merci

Domi65

16 février 2025 à 11:46:58

Je t'en prie.

Cependant, j'insiste sur le fait qu'un ID ne doit figurer qu'une fois. Pense à corriger cela.

DominiqueSimon5

21 février 2025 à 9:12:23

Bonjour,

Le code fonctionne en effet si tu effaces le contenu de la ligne mais les totaux en bas des colonnes ne se met pas à jour.

Une idée svp, je rame.....

-
Edité par DominiqueSimon5 21 février 2025 à 9:15:05

Domi65

22 février 2025 à 19:57:34

« Le code fonctionne en effet si tu effaces le contenu de la ligne mais les totaux en bas des colonnes ne se met pas à jour »

Bien sûr, par quel miracle le ferait-il ? Et est-ce que ça mout le café ? ;-)

Plus sérieusement, comment le résultat (la valeur des champs que tu as entourés), est-il affiché? Importé (par exemple d'une base de donnée), ou calculé à un moment donné par du JS ?

DominiqueSimon5

22 février 2025 à 22:41:54

Les totaux s'affichent lors du calcul mais ne se mettent pas a jour au moment du reset d'une ligne

Si tu regarde le code, le calcul se fait par JS (voici le code JS complet)

// Calcul par lignes
function recalcul(oEvent) {
  var oInput = oEvent.currentTarget,
    //Tr contenant la ligne d'inputs
    oTr = oInput.parentNode.parentNode,
    //Input qui va contenir la somme
    oSomme = oTr.querySelector(".somme [type='text']");
  if (isNaN(oInput.value) == true) {
    //Seulement si on est sure que la valeur initiale de l'inpuut est un chiffre
    oInput.value = oInput.defaultValue;
    //oInput.value = 0;
  } //if
  //Tableaus des inputs de la ligne
  var aInput = oTr.querySelectorAll(".valeur [type='text']");
  iNbInput = aInput.length, fSomme = 0;
  for (var i = 0; i < iNbInput; i++) {
    //Si la valeur de l'input n'est pas un chiffre
    if (isNaN(aInput[i].value) == true) {
      aInput[i].value = 0;
    } //if
    var fVal = aInput[i].value;
    fSomme += Number(fVal);
  } //for
  //Si somme n'est pas un chiffre
  //Normalement impossible
  if (isNaN(fSomme) == true) {
    fSomme = '';
  } //if
  oSomme.value = fSomme;

  // Adition des colonnes
  var colonneSomme = 0;
  var trs = oTr.parentNode.children;
  var index = parseInt(oInput.id.replace(/\D/g, '')) - 1;
  for (var tr of trs) {
    (tr.querySelectorAll(".valeur")[index].children[0].value != "") ? colonneSomme += Number(tr.querySelectorAll(".valeur")[index].children[0].value) : "";
  }
  oTr.parentElement.parentElement.querySelector('tfoot').children[0].children[index + 1].firstChild.value = colonneSomme;
  console.log(index);

  // Calucl total de la dernière colonne !!!!!!!!!!!!!!!!!!!!!!
  var $colonne = $('.inp1').change(function () {
    var total = 0;
    //Parcours des éléments et affiche le total général
    $colonne.each(function () {
      total += (parseFloat($.trim(this.value / 2)) || 0)
      console.log(total);
    })
    document.getElementById('total').value = total;

  });
  // effacer les données des input de la ligne
  for (let btn of document.querySelectorAll('[type=reset]')) {
    btn.onclick = function () {
      event.preventDefault();
      for (let input of this.closest('tr').querySelectorAll('input'))
        input.value = '0';
    }
  }

} //fct
// Fin du calcul par colonnes
document.addEventListener('DOMContentLoaded', function () {
  // //Assignation de l'écoute de l'événement
  var aInput = document.querySelectorAll(".valeur [type='text']"),
    iNbTr = aInput.length;
  for (var i = 0; i < iNbTr; i++) {
    aInput[i].addEventListener('keyup', recalcul);
    if (i % 3 == 2) {
      //lance la calcule de la ligne
      recalcul({
        currentTarget: aInput[i]
      });
    } //if
  } //for
});

function myFunction() {
  window.location.href = "../pages/extranet.php";
}

-
Edité par DominiqueSimon5 23 février 2025 à 9:52:28

SleuvinS

23 février 2025 à 11:20:15

L'événement du bouton reset n'appelle pas la fonction `recalcul()`, seul l'événement 'keyup' des inputs l'appelle.

D'ailleurs tu assignes les écouteurs événements 'keyup' à l'intérieur de l'écouteur de l'événement 'DOMContentLoaded', mais les écouteurs d'événements onClick à l'intérieur de la fonction `recalcul()`, pourquoi cette différence?

DominiqueSimon5

23 février 2025 à 14:09:41

Bonjour Sleuvin5,

Merci pour ta réponse.

Novice en JS (je viens du mode de Windev et SQL server), j'avoue comprendre ta réponse mais ne vois pas comment résoudre mon problème.

Je n'arrive pas à adapter cette partie à ta réponse

  // effacer les données des input de la ligne
  for (let btn of document.querySelectorAll('[type=reset]')) {
    btn.onclick = function () {
      event.preventDefault();
      for (let input of this.closest('tr').querySelectorAll('input'))
        input.value = '0';
      var aSomme = document.querySelectorAll(".somme [type='text']");
    }
  }

Pourrais tu m'aider en me guidant stp

Merci beaucoup

Domi65

23 février 2025 à 17:32:50

Hello

Je ne suis pas entré dans les détails, mais...

Le gestionnaire que je t'ai proposé n'a, à priori, rien à faire dns la fonction recalcul

Il semble que la fonction recalcul fait ce que tu demandes. Il suffit de l'appeler "en fin" de la fonction anonyme lancée par le gestionnaire que je t'ai proposé, une fois celui-ci sorti de sa fonction parente.

As-tu essayé cette solution ? (il semblerait que le code contienne du Jquery, que je ne connais pas)

SleuvinS

23 février 2025 à 18:14:42

@DominiqueSimon5 Tu n'as pas répondu à ma question. Pourquoi placer la boucle qui assigne un écouteur d'événement à chaque input (le code que @Domi65 t'a donné en exemple) à cet endroit spécifiquement? Peux-tu m'expliquer avec tes mots ce qu'est sensé faire ce code?

A part ça, quel est le but de ta page web? Es-tu en formation avec OpenClassrooms en ce moment?

DominiqueSimon5

23 février 2025 à 18:44:06

Bonsoir,

Je ne suis pas en formation mais autodidacte.

Comme expliqué, je viens de windev et sql server.

Je cherche a transformer un programme de gestion fait sur windev vers un programme web.

La page en question est un budget annuel dont les categories sont alimentés par une requete et d'opérateur doit renseigner son budget lui meme.

Les sommes des lignes et des colonnes se fait automatiquement.

Pour les lignes j'ai finis par trouver mais le recalcul des colonnes me pose un soucis

Quand au code js, j'y suis arrivé a force de lire, donc susceptible de contenir des erreurs ou améliorations possible

Voila

SleuvinS

24 février 2025 à 10:47:32

Pourquoi avoir choisi JavaScript spécifiquement? Si tu souhaites poursuivre dans ce langage, je te suggère de t'intéresser à la gestion des événements (du DOM, mais pas seulement).

Ici, on peut séparer ton code en deux blocs:

la fonction recalcul() qui calcule les totaux des lignes et colonnes
l'écouteur d'évenement 'DOMContentLoaded' qui initialize les autres écouteurs d'événements une fois que tous les éléments du DOM sont créées.

La boucle que t'a écrite Domi65 attache d'autres écouteurs d'événements sur les boutons 'reset', elle a donc plus sa place dans la deuxième partie de ton code.

La deuxième chose à faire, c'est d'ajouter un appel à la fonction recalcul() lorsqu'un événement de type reset est déclenché:

btn.onclick = function (event) {
    event.preventDefault();
    for (let input of this.closest('tr').querySelectorAll('input'))
      input.value = '0';
    recalcul(event)
}

ou pour s'accorder avec la syntaxe utilisée dans le reste du code:

btn.addEventListener('click', function (event) {
    event.preventDefault();
    for (let input of this.closest('tr').querySelectorAll('input'))
      input.value = '0';
    recalcul(event)
})

-
Edité par SleuvinS 25 février 2025 à 9:57:40

Domi65

24 février 2025 à 19:58:52

Pour poursuivre la réflexion de SleuvinS, je te conseille de suivre ce qui est pour moi la meilleure formation JS que je connaisse :

javascript.info

Cordialement.