Reprenez votre code du TP-3, ou bien celui-ci:

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="nom">Leïla</td><td class="score">121</td></tr>
	<tr><td class="nom">Driss</td><td class="score">153</td></tr>
	<tr><td class="nom">Lian</td><td class="score">210</td></tr>
	<tr><td class="nom">Joe</td><td class="score">32</td></tr>
	<tr><td class="nom">Naïma</td><td class="score">261</td></tr>
	<tr><td class="nom">Karim</td><td class="score">183</td></tr>
	<tr><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.js

console.log("Ce programme JS vient d'être chargé");
$(document).ready(function()
{
	console.log("Le document est pret");
	
	$('#ajout-bouton').click(function()
		{
			var joueur={ nom:   $('#ajout-nom'  ).val(),
						 score: $('#ajout-score').val()
					   };
			ajouter_joueur(joueur);
			$('#ajout-nom'	).val('');
			$('#ajout-score').val('');

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

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

function ajouter_joueur(joueur)
{
	var ligne=$('<tr><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);
	}
}