Recuperer un element
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
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';