6.9: Correction : code complet

joueurs.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>joueurs</title>
		<link type="text/css" rel="stylesheet" href="joueurs.css"/>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script src="joueurs.js"></script>
	</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="ajout-bouton" type="button" value="ajouter"/>
</p>
<table id="joueurs">
	<tr><td class="effacer"></td><td class="nom">Leïla</td><td class="score">121</td></tr>
	<tr><td class="effacer"></td><td class="nom">Driss</td><td class="score">153</td></tr>
	<tr><td class="effacer"></td><td class="nom">Lian</td><td class="score">210</td></tr>
	<tr><td class="effacer"></td><td class="nom">Joe</td><td class="score"> 32</td></tr>
	<tr><td class="effacer"></td><td class="nom">Naïma</td><td class="score">261</td></tr>
	<tr><td class="effacer"></td><td class="nom">Karim</td><td class="score">183</td></tr>
	<tr><td class="effacer"></td><td class="nom">Anon.</td><td class="score">  0</td></tr>
</table>
<p>
	total   : <span id="total" >960</span><br/>
	médiane : <span id="mediane">153</span>
</p>

<!--------------------->
	</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;
}

#joueurs .score
{
    text-align: right;
}

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

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

#joueurs .effacer
{
    background-image: url(effacer.png);
    background-repeat: no-repeat;
    background-position: 4px center;
    width: 25px;
    height: 16px;
    padding: 0;
    cursor: pointer;
}

joueurs.js

console.log("Ce programme JS vient d'être chargé");
$(document).ready(function()
{
	console.log("Le document est pret");

	trier();
	
	$('#ajout-bouton').click(function()
		{
			var joueur={ nom:   $('#ajout-nom'  ).val(),
						 score: $('#ajout-score').val()
					   };

			if(joueur.nom.length===0){alert("Le nom ne doit pas être vide !");return;}			
			if(/^[0-9]+$/.test(joueur.score)===false){alert("Score invalide");return;}
			var existeDeja=false;
			$('#joueurs tr').each(function()
				{
					if($(this).find('.nom').text()===joueur.nom){existeDeja=true;}
				});
			if(existeDeja){alert("Ce nom a déjà été rentré !");return;}			

			ajouter_joueur(joueur);
			$('#ajout-nom'	).val('');
			$('#ajout-score').val('');

			$('#total'  ).text(calculer_total());
			$('#mediane').text(calculer_mediane());
			trier();
		});

	$('#joueurs').click(function(event)
		{
			if($(event.target).hasClass('effacer'))
			{
				$(event.target).parent().remove();
				$('#total'  ).text(calculer_total());
				$('#mediane').text(calculer_mediane());
			}
		});

	console.log("La mise en place est finie. En attente d'événements...");
});

function ajouter_joueur(joueur)
{
	var ligne=$('<tr><td class="effacer"></td><td class="nom"></td><td class="score"></td></tr>');
	ligne.find(".nom"  ).text(joueur.nom  );
	ligne.find(".score").text(joueur.score);
	$('#joueurs').append(ligne);
}

function calculer_total()
{
	var total=0;
	// Pour chaque ligne du tableau .each() appelle la fonction.
	$('#joueurs tr').each(function()
		{
			// $(this) est la ligne (tr) ... 
			// on veut le texte dans la case avec le score
			var score=parseInt($(this).find('.score').text());
			// La variable "total" est définie dans la fonction calculer_total... 
			// mais on peut y accéder ici (fermeture)
			total+=score;
		});
	return total;
}

function calculer_mediane()
{
	var scores=[];
	$('#joueurs tr').each(function()
		{
			var s=parseInt($(this).find('.score').text());
			scores.push(s);
		});
	scores.sort(function(a,b){return a-b;});
	return scores[Math.floor(scores.length/2)];
}

function trier()
{
	var joueurs=[];
	$('#joueurs tr').each(function()
		{
			var s=parseInt($(this).find('.score').text());
			var j=
				{
					ligne:$(this),
					score:s
				};
			joueurs.push(j);
		});
	joueurs.sort(function(a,b){return b.score-a.score;});
	for(var i=0;i<joueurs.length;i++)
	{
		var ligne=joueurs[i].ligne;
		$('#joueurs').append(ligne);
	}
}