Recuperer un element

Par Ekim Kael, il y a 9 ans

Javascript

Mon HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Manage Players</title> <!-- Bootstrap --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <style> .users{ display: flex; flex-direction: row; align-content: space-between; } .users img{ margin: 0 5px; } </style> </head> <body> <div class="col-xs-8 col-sm-10 col-md-8 col-lg-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-1"> <div class="panel panel-default"> <div class="panel-heading"> <h2 class="center">Convocations U11 3</h2> </div> <div class="panel-body"> <table class="table table-striped"> <thead> <tr> <th>Joueurs</th> <th>Date</th> <th>Validation</th> </tr> </thead> <tbody> <tr> <th> <div class="users"> <img class="img-circle" src="http://placehold.it/50x50" alt=""> <h4 class="text-primary">MichKael</h4> </div> </th> <th> 10/09/2016</th> <th> <button type="button" class="btn btn-success" >Présent <span class="glyphicon glyphicon-ok"></span></button> <button type="button" class="btn btn-success" ><span class="caret"></span></button> </th> </tr> <tr> <th> <div class="users"> <img class="img-circle" src="http://placehold.it/50x50" alt=""> <h4 class="text-danger">James R.</h4> </div> </th> <th> 10/09/2016</th> <th> <a href="#" class="btn btn-danger remove">Absent <span class="glyphicon glyphicon-remove"></span></a> </th> </tr> <tr> <th> <div class="users"> <img class="img-circle" src="http://placehold.it/50x50" alt=""> <h4 class="text-danger">James R.</h4> </div> </th> <th> 10/09/2016</th> <th> <a href="#" class="btn btn-danger remove">Absent <span class="glyphicon glyphicon-remove"></span></a> </th> </tr> <tr> <th> <div class="users"> <img class="img-circle" src="http://placehold.it/50x50" alt=""> <h4>Leonel M.</h4> </div> </th> <th> 10/09/2016</th> <th> <div class="btn-group btn-group-sm" role="group" aria-label="Small button group"> <button type="button" class="btn btn-danger">Absent</button> <button type="button" class="btn btn-success">Présent</button> </div> </th> </tr> <tr> <th> <div class="users"> <img class="img-circle" src="http://placehold.it/50x50" alt=""> <h4>Cristiano R.</h4> </div> </th> <th> 10/09/2016</th> <th> <div class="btn-group btn-group-sm" role="group" aria-label="Small button group"> <button type="button" class="btn btn-danger">Absent</button> <button type="button" class="btn btn-success">Présent</button> </div> </th> </tr> <tr> <th> <div class="users"> <img class="img-circle" src="http://placehold.it/50x50" alt=""> <h4>Neymar J.</h4> </div> </th> <th> 10/09/2016</th> <th> <div class="btn-group btn-group-sm" role="group" aria-label="Small button group"> <button type="button" class="btn btn-danger">Absent</button> <button type="button" class="btn btn-success">Présent</button> </div> </th> </tr> </tbody> </table> </div> </div> </div> <script src="jquery/jquery.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html>

Mon JS

<script> var elements = document.querySelectorAll('.remove') for(var i = 0; i < elements.length; i++){ elements[i].addEventListener('click', function(e){ var classe = e.target.classList var url = e.target.getAttribute('href') classe.remove('btn-danger','remove') e.target.innerHTML = 'Présent <span class="glyphicon glyphicon-ok"></span>' classe.add('btn-success','present') console.log(elements[i].parentNode.parentNode.querySelector('tr h4')) }) } </script>

je voudrais recuperer le ' H4 ' correspondant au lien que j'ai cliqué et lui changer sa couleur

2 réponses

boubou, il y a 9 ans

Salut,

Si tu remplace dans ton console.log elements[i] par this tu devrait récupérer ce qui t'intéresse normalement pour ensuite faire le traitement de changement de couleur du genre :

this.parentNode.parentNode.querySelector('tr h4').style.color = 'red';
Ekim Kael, il y a 9 ans

Grand merci ça marche