6: Tableau joueurs

On va reprendre le tableau de joueurs du sujet-5. Des petites croix ont été ajoutées à chaque ligne.

Créez les fichiers suivants (ou reprenez les vôtres en mettant à jour le tableau HTML)

joueurs.html

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>joueurs</title>
		<link type="text/css" rel="stylesheet" href="joueurs.css"/>
	</head>
	<body>
<!--------------------->
<h2>Joueurs :</h2>
<p id="ajouter">
	<label>nom:   <input id="ajout-nom"   type="text"/></label>
	<label>score: <input id="ajout-score" type="text"/></label>
	<input id="bouton-ajouter" type="button" value="ajouter"/>
</p>
<table id="joueurs">
	<tr><td class="effacer"><img src="https://moodle.iutv.univ-paris13.fr/img/js/effacer.png"/></td><td class="nom">Leïla</td><td class="score">121</td></tr>
	<tr><td class="effacer"><img src="https://moodle.iutv.univ-paris13.fr/img/js/effacer.png"/></td><td class="nom">Driss</td><td class="score">153</td></tr>
	<tr><td class="effacer"><img src="https://moodle.iutv.univ-paris13.fr/img/js/effacer.png"/></td><td class="nom">Lian</td><td class="score">210</td></tr>
	<tr><td class="effacer"><img src="https://moodle.iutv.univ-paris13.fr/img/js/effacer.png"/></td><td class="nom">Joe</td><td class="score">32</td></tr>
	<tr><td class="effacer"><img src="https://moodle.iutv.univ-paris13.fr/img/js/effacer.png"/></td><td class="nom">Naïma</td><td class="score">261</td></tr>
	<tr><td class="effacer"><img src="https://moodle.iutv.univ-paris13.fr/img/js/effacer.png"/></td><td class="nom">Karim</td><td class="score">183</td></tr>
	<tr><td class="effacer"><img src="https://moodle.iutv.univ-paris13.fr/img/js/effacer.png"/></td><td class="nom">Anon.</td><td class="score">0</td></tr>
</table>
<p>
	total   : <span id="total"  >960</span><br/>
</p>

<!--------------------->
	<script src="joueurs.js"></script>
	</body>
</html>

joueurs.css

body
{
	font-family: sans;
}

h2
{
	font-size: 16px;
}

#joueurs
{
	box-shadow: 2px 2px 4px rgba(0,0,0,.2);
	border-radius: 2px;
	border-collapse: collapse;
	margin-left: 40px;
}

#joueurs td
{
	padding: 3px 10px;
}
#joueurs tr
{
	background-color: #f0f0ff;
}

#joueurs tr:nth-child(2n)
{
	background-color: #efe;
}

#ajouter input[type='text']
{
	width: 80px;
}

#ajout-nom
{
	margin-right: 10px;
}

joueurs.js

let bouton=document.getElementById('bouton-ajouter');
bouton.addEventListener('click',function(){
  console.log('Click');
  let joueur={
    nom: document.getElementById('ajout-nom').value,
    score: document.getElementById('ajout-score').value
  };
  ajouter_joueur(joueur);
  document.getElementById('ajout-nom').value='';
  document.getElementById('ajout-score').value='';
  document.getElementById('total').textContent=calculer_total();
});

function calculer_total()
{
  let total=0;
  let tds=document.querySelectorAll('.score');
  for(let i=0;i<tds.length;i++){
    let score=parseInt(tds[i].textContent);
    total+=score;
  }
  return total;
}

function ajouter_joueur(joueur)
{
  console.log('ajouter_joueur',joueur);
  let ligne=document.createElement('tr');
  let nom  =document.createElement('td');
  let score=document.createElement('td');
  nom.textContent=joueur.nom;
  score.textContent=joueur.score;
  nom.className='nom';
  score.className='score';
  ligne.append(nom);
  ligne.append(score);
  document.getElementById('joueurs').append(ligne);
}