Récupérer l'index de la ligne dynamiquement

Sujet résolu

22 avril 2017 à 10:39:46

Bonjour,

J'ai un panel de gestion où il y a ma liste d'utilisateur :

Parfois, certains ne respectent pas les règles (divulguent leur compte) et donc je les banni. Lorsqu'ils sont banni depuis un certain temps, je les supprime. Lorsque je clique sur le bouton supprimer, ça effectue l'action de supprimer l'utilisateur sur le serveur et supprime la ligne avec un document.getElementById("mon_tableau").deleteRow(line);

Le problème, c'est que si je supprime un utilisateur, et qu'ensuite j'en supprime un autre qui se trouvait en dessous de l'utilisateur précédent, c'est la mauvaise ligne qui part. Il me faudrait pouvoir récupérer la bonne ligne à chaque fois.

Pouvez-vous m'aider ?

Merci

YLaakel

22 avril 2017 à 11:54:36

Bonjour est ce qu'on peut voir un aperçu de ton code stp?

Alexander M

22 avril 2017 à 12:03:06

Salut

Remonte les parents à partir du bouton

Exemple

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>Site</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>OpenClassRooms</td>
      <td><button>Suprimer</button></td>
    </tr>
    <tr>
      <td>Google</td>
      <td><button>Suprimer</button></td>
    </tr>
    <tr>
      <td>Mon site</td>
      <td><button>Suprimer</button></td>
    </tr>
  </tbody>
</table>

<script>
    const table = document.querySelector('table');
    const buttons = document.querySelectorAll('button');

    buttons.forEach((index) => {
        index.addEventListener('click', (e) => table.deleteRow(e.target.parentNode.parentNode.rowIndex))
    })

</script>
</body>
</html>

racacax

22 avril 2017 à 12:18:34

Merci de vos réponses

@YLaakel : Voici la fonction de suppression :

function ban(bw,line) {
try {
var req = getReq();
req.open("GET", "http://racacaxtv.ga/panel.php?user=racacax&pass=[TOKEN DE CONNEXION] &ban3=" + bw, false); req.send("");
} catch(e) {}
document.getElementById("mon_tableau").deleteRow(line);
}

// bw = nom d'utilisateur

Lorsque l'on clique sur supprimer, la fonction est lancée. Mais le problème des lignes empêche le script de bien fonctionner.

@Alexander M. J'ai essayé d'adapter ton code pour moi mais ça n'a pas fonctionné.

YLaakel

22 avril 2017 à 12:21:35

line renvoi le numéro de ta ligne mais c'est l'indice qu'il faut spécifier dans deleteRow donc je suppose que tu devrais faire deleteRow(line - 1) car les indices commencent à 0

racacax

22 avril 2017 à 12:24:49

Oui, ça c'est fait mais lorsque j'ai par exemple supprimé la ligne 20, si j'essaie de supprimer une ligne après la ligne 20, ça supprimera la mauvaise.

Alexander M

22 avril 2017 à 12:28:01

Récupère rowIndex et cela fonctionnera

racacax

22 avril 2017 à 12:43:59

J'ai essayé le ban('user',this.parentNode.parentNode.rowIndex) mais ça supprime la ligne 0 à chaque fois

Alexander M

22 avril 2017 à 12:56:25

Done l’architecture d'une ligne de ton tableau.

Comment tu gère l'event ? onclick, EventListener ?

racacax

22 avril 2017 à 13:17:59

Une ligne est comme ceci (avec un évènement onclick) :

<tr>
    <td><center>Albatorpt</center></td><td><center>[Mot de passe]</center></td> <td style="color:#6fd513;"><center>Actif</center></td> <td><center style="color:"><b>0 / 40</b></center></td><td><center></center><td><center><b style="color:#fa2d07";>01/01/1970 à 00:00</b></center></td><td><center>Non</center></td><td><center>EMAIL</center></td><td><center><a href="panel.php?user=racacax&pass=870374f29933ee29d856010f85da9aad&ban=Albatorpt">Réactiver</a> <a href="panel.php?user=racacax&pass=870374f29933ee29d856010f85da9aad&ban1=Albatorpt">Suspendre</a> <a href="panel.php?user=racacax&pass=870374f29933ee29d856010f85da9aad&ban2=Albatorpt">Bannir</a> <a href="#" onclick="ban('Albatorpt',this); alert('Utilisateur supprimé');">Supprimer</a></center></td>
  </tr>

Le code est comme ceci maintenant :

function ban(bw,element) {
try {
var req = getReq();
req.open("GET", "http://racacaxtv.ga/panel.php?user=racacax&pass=870374f29933ee29d856010f85da9aad&ban3=" + bw, false); req.send("");
} catch(e) {}
document.getElementById("mon_tableau").deleteRow(element.parentNode.parentNode.rowIndex);
}

Mais toujours rien

-
Edité par racacax 22 avril 2017 à 13:25:24

Alexander M

22 avril 2017 à 13:27:08

deleteRow(this.event.target.parentNode.parentNode.rowIndex)

racacax

22 avril 2017 à 13:49:56

Malheureusement j'ai

TypeError: this.event is undefined

j'ai enfin réussi :

ban('user',$(this).closest('td').parent()[0].sectionRowIndex);

-
Edité par racacax 22 avril 2017 à 14:15:18