Montre/Cacher des colonnes avec JavaScript

by Bruno G.

HTML

<table id="fiche" border="1" style="width:100%">
	<colgroup>
		<col class="FRA"/>
		<col class="ENG"/>
		<col class="ESP"/>
	</colgroup>
  <tr>
    <td colspan="3">Rangée complète</td>
  </tr>
	<tr>
    <td class="FR">Français</td>
    <td class="EN">Anglais</td>
    <td class="ES">Espagnol</td>
  </tr>
	<tr>
    <td class="FR">Français</td>
    <td class="EN">Anglais</td>
    <td class="ES">Espagnol</td>
  </tr>
	<tr>
    <td class="FR">Français</td>
    <td class="EN">Anglais</td>
    <td class="ES">Espagnol</td>
  </tr>
	<tr>
    <td class="FR">Français</td>
    <td class="EN">Anglais</td>
    <td class="ES">Espagnol</td>
  </tr>
	<tr>
    <td class="FR">Français</td>
    <td class="EN">Anglais</td>
    <td class="ES">Espagnol</td>
  </tr>
</table>
<br>
  <a class="toggleCol-FR">Français</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <a class="toggleCol-ENG-off">Anglais</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <a class="toggleCol-ESP">Espagnol</a><br>
  <a class="toggle-ON">Toggle ON</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <a class="toggle-OFF-off">Toggle OFF</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <a class="toggle-BAD">Toggle BAD</a>
<div class="ON">DIV ON</div>
<div class="OFF">DIV OFF</div>
<div class="GOOD">DIV GOOD</div>

CSS

col.FRA { background-color:blue}
col.ENG {background-color:red}
col.ESP {background-color:green}

.toggleLnk:hover {background-color:#cce6f1}
.toggleLnk:active {outline:0}

JavaScript

toggleCol = function (col, state){
		i = $('#fiche>colgroup>col.'+col).index();
		if (i == -1) {
			alert('Tag <col> with class="'+col+'" not found!');
		} else {
			var el = $('#fiche>colgroup>col, #fiche>tbody>tr>td').filter(':nth-child('+(i+1)+')').filter(':not([colspan])');
			if (state == false) {
				el.hide();
			} else {
				el.toggle();
			}
		}
	}

	//Active les éléments utilisés pour basculer la visibilité d'autres éléments
	//	Ajouter la classe toggle-xxxx à l'élément qu'on veut cliquer pour basculer l'élément ayant la classe xxxx
	//	Si on veut cacher la classe xxxx à l'affichage, utiliser la classe toggle-xxxx-off
	//	Pour basculer une colonne d'une table, ajouter la classe xxxx à l'élément <col> d'un <colgroup> au début de la table
	//		et utiliser toggleCol-xxxx ou toggleCol-xxxx-off comme classe de l'élément à cliquer
	var toggleElms = $('a');
	toggleElms.filter('[class^="toggleCol-"], [class*=" toggleCol-"]').click(function(e){
		var t = $(this);
		//On extrait la classe voulue...
		var cls = t.attr('class').match(/toggleCol-([^\s-]*)/) || ['',''];
		var tgt = cls[1];
		//	... et on bascule sa visibilité
		if (tgt) toggleCol(tgt);
		t.toggleClass('Off On').blur();
		//On empêche de suivre le lien si <a>
		e.preventDefault();
	}).each(function(){
		var t = $(this);
		//Ajoute href pour avoir un lien
		t.prop('href', '#')
		//On cache les éléments qui ont '-off'
		var cls = t.attr('class').match(/toggleCol-(\S*)-off/) || ['',''];
		var tgt = cls[1];
		if (tgt) {
			t.addClass('toggleLnk On');
			toggleCol(tgt, false);
		} else {
			t.addClass('toggleLnk Off');
		}
	});
	toggleElms.filter('[class^="toggle-"], [class*=" toggle-"]').click(function(e){
		var t = $(this);
		//On extrait la classe voulue...
		var cls = t.attr('class').match(/toggle-([^\s-]*)/) || ['',''];
		var tgt = cls[1];
		//	... et on bascule sa visibilité
		if (tgt) {
			var el = $('.'+tgt);
			if (el.length) {
				el.toggle();
			} else {
				alert('No element with...