Discussion :

[flavors]

Bonjour,
Je souhaiterais, lors d'un clic sur l'entête d'une colone de mon tableau, afficher les colones qui suivent de façon progressive.
J'obtiens plus ou moins l'effet que je souhaite : un slide horizontale.
http://jsfiddle.net/7ZBQa/1392/
Le probléme, c'est qu'au lieu de partir d'une largeur de 0 pour aller jusqu'à sa largeur maximale, la colone apparait directement avec la largeur du texte à l'interieur et s'étend jusqu'à la largeur max.
Quelqu'un aurait une solution?

[Watilin]

Le problème c'est les cellules de tableau qui ne gèrent pas leur width de la même façon que les autres éléments HTML.
Tu peux corriger ça facilement en intercalant une couche de <div> entre tes cellules et leur contenu, et en leur donnant un overflow: hidden.

[flavors]

Bonjour.

Merci pour ta réponse et désolé pour ce délai de réponse, je n'était pas chez moi le reste de la semaine et n'avais pas accés à un ordinateur.
J'ai essayé d'intercaler un div dans mes cellules et en leur mettant un overflow:hidden mais sans succés...
Est-ce que j'ai procédé de la bonne façon? http://jsfiddle.net/7ZBQa/1395/

[danielhagnoul]

Exemple avec une structure de table correcte et fadeToggle() :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
td, th {
  width: 100px;
  height: 20px;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<table id="id_of_table">
  <thead>
    <tr>
      <th>N°</th>
      <th>E</th>
      <th>F</th>
      <th>D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2</td>
      <td>two</td>
      <td>deux</td>
      <td>zwei</td>
    </tr>
    <tr>
      <td>3</td>
      <td>three</td>
      <td>trois</td>
      <td>drei</td>
    </tr>
    <tr>
      <td>4</td>
      <td>four</td>
      <td>quattre</td>
      <td>vier</td>
    </tr>
    <tr>
      <td>5</td>
      <td>five</td>
      <td>cinq</td>
      <td>f&uuml;nf</td>
    </tr>
  </tbody>
</table>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function toggleColumn( n = 0 ){
  let rows = document.querySelectorAll( 'tr', '#id_of_table' );
 
  for ( let i = 0; i < rows.length; i++ ){
    let cols = rows[i].children;
 
    if ( n >= 0 && n < cols.length) {
      $( cols[ n ] ).fadeToggle( 3000 );
    }
  }
}
 
toggleColumn( 2 ); // base 0

[flavors]

Bonjour et merci ton aide.

J'ai essayé ton code mais je n'arrive pas à le faire fonctionner.
Si j'ai bien compris, on fait un tableau avec toutes les lignes. A partir de ce tableau, on en fait un autre avec les cellules de chaques colones.
Puis on fait apparaitre ou disparaitre la colone?

http://jsfiddle.net/7ZBQa/1397/

Dans ce cas
Il ne devrait y avoir que la 1ere colone qui reste non?
J'ai regardé la fonction fadeToggle(). Elle permet de faire apparaitre ou disparaitre mais ne permet pas d'avoir un effet "tiroir" non?

[Invité]

Bonjour,

ceci devrait faire l'affaire : http://codepen.io/jreaux62/pen/wMLxxX

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<table id='tableau'>
  <thead>
    <tr>
      <th class="colAtete">A</th>
      <th class="col notDisplayed"><div>B</div></th>
      <th class="col notDisplayed"><div>C</div></th>
      <th class="col notDisplayed"><div>D</div></th>
      <th class="col notDisplayed"><div>E</div></th>
      <th class="col notDisplayed"><div>F</div></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="colA">123123</td>
      <td class="col notDisplayed"><div>123123 sdfsdf sdf sdf sdf sdf df dfsdfs sd</div></td>
      <td class="col notDisplayed"><div>123123</div></td>
      <td class="col notDisplayed"><div>123123</div></td>
      <td class="col notDisplayed"><div>123123sd fgsdfg sdfgdfs d</div></td>
      <td class="col notDisplayed"><div>123123</div></td>
    </tr>
    <tr>
      <td class="colA">123123</td>
      <td class="col notDisplayed"><div>123123</div></td>
      <td class="col notDisplayed"><div>123123s dgsdfgsdgf</div></td>
      <td class="col notDisplayed"><div>123123</div></td>
      <td class="col notDisplayed"><div>123123</div></td>
      <td class="col notDisplayed"><div>123123 sdfg</div></td>
    </tr>
  </tbody>
</table>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 $("#tableau").on('click', '.colAtete', function() {
 	if( $('.col div').css('display') == 'block' )
  {
       $('.col div').hide(0);
       $('.col').animate({
      width: 'toggle'
    }, 500, function() {
      // Animation complete.
      // (rien ici)
     });
  } else {
       $('.col').animate({
      width: 'toggle'
    }, 500, function() {
      // Animation complete.
       $('.col div').fadeIn();
     });
  }
 });

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
table {	
	margin-top:40px;
	margin-left:20px;
 
	border-collapse:collapse;
	}
td, th {
  width:100px;
	padding:3px;
	border: 1px solid gray;
	}
.colAtete{
  cursor:pointer;
}
thead {
	border:3px solid black;
	}
tbody {
	border:3px solid black;
	}
.notDisplayed {
    display: none;
    }
.notDisplayed div {
    display: none;
  }

N.B. Pour info :

• on met des <th> dans le <thead>
• et des <td> dans le <tbody>

[flavors]

C'est effectivement l'effet que je recherchais!
J'essai d'implementer ça dans mon code.

N.B. Pour info :
on met des <th> dans le <thead>
et des <td> dans le <tbody>

En effet. C'est une erreur de "ctrl+c / ctrl+v" sur JSFiddle.
Merci à vous !

[Watilin]

Bon j'ai pas été aussi rapide que jreaux62, mais j'étais en train d'adapter ton jsfiddle, flavors. Pour dire que c'est la width de la <div> que tu dois faire varier, et les cellules s'adaptent automatiquement. Du coup ma version ressemble beaucoup à celle de jreaux62, je la mets quand même pour le fun

http://jsfiddle.net/7ZBQa/1403/

[flavors]

Merci!
C'est toujours interessant de voir les diférentes possibilités pour arriver à un même résultat.

Merci à vous 3!

[Invité]

C'est toujours interessant de voir les diférentes possibilités pour arriver à un même résultat.

Je , car on a tout à apprendre les uns des autres.

En particulier, je les interventions de Watilin sur ce coup.

Comme quoi, "tous les chemins mènent au rhum"...

@flavors
Tu as maintenant matière pour modifier à ta guise les effets de transition (fade, hide, slide,...)

[NoSmoking]

Bonjour,

...de voir les diférentes possibilités pour arriver à un même résultat.

si c'est pour mettre des DIVs à l'intérieur des TDs autant ne passer que par des DIVs.

• Le html deviendrait

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div id='tableau'>
    <div class="row">
      <div class="colAtete">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
    </div>
    <div class="row">
      <div class="colA">123123</div>
      <div class="col">123123</div>
      <div class="col">123123</div>
      <div class="col">123123</div>
      <div class="col">123123</div>
      <div class="col">123123</div>
    </div>
    <div class="row">
      <div class="colA">123123</div>
      <div class="col">123123</div>
      <div class="col">123123</div>
      <div class="col">123123</div>
      <div class="col">123123</div>
      <div class="col">123123</div>
    </div>
</div>

• en appliquant ce CSS pour que cela ressemble à une TABLE :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#tableau {
  margin:1em;
  border:1px solid black;
  display:inline-block;
}
#tableau div{
  float:left;
}
.row{
  clear:left;
}
.row div{
  padding:.25em;
}
.row + .row {
  border-top:1px solid blue;
}
.colAtete{
  cursor:pointer;
}
[class^="colA"]{
  background:#eef;
  width:5em;
}
.col{
  width:150px;
  border-left:1px solid blue;
}

• pour le coup le script se limite à :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$("#tableau").on('click', '.colAtete', function() {
    $('.col').animate({'width' : 'toggle'});
});

[Watilin]

Oh tiens, du float, ça faisait longtemps… Je peux pas dire que j'aime l'idée.

Pour moi ça touche à une question plus profonde : est-ce que le site doit pouvoir marcher en version « dégradée », c'est-à-dire sans JavaScript. Dans ce cas il faut conserver la structure de tableau originale.

Sinon on peut partir sur une single-page app à la Sekaijin (si ma mémoire est bonne) où on a un <body></body> et où tout le contenu est généré par script.

[Invité]

Bonjour,

tant qu'à jouer...

Voici une version au HTML épuré : http://codepen.io/jreaux62/pen/dGxNzG

• avec une <table> débarrassée de toute class superflue,
• et sans <div> encombrants.
• Tout se passe dans le CSS et le jQuery

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<table class="tabslide">
  <thead>
    <tr>
      <th>One</th>
      <th>Deux</th>
      <th>Drei</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>111 111</td>
      <td>123123 sdfsdf sdf  sd</td>
      <td>123123jr jtjtryj rtyjrtjy rtyjtyj rtj</td>
    </tr>
    <tr>
      <td>222 222</td>
      <td>123123sd fgsdfg sdfgdfs d</td>
      <td>123123 sdf</td>
    </tr>
  </tbody>
</table>
 
<table class="tabslide">
  <thead>
    <tr>
      <th>Alpha</th>
      <th>Beta</th>
      <th>Kappa</th>
      <th>Delta</th>
      <th>Epsilon</th>
      <th>Fin</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>123123</td>
      <td>123123 sdfsdf sdf sdf sdf sdf df dfsdfs sd</td>
      <td>123123</td>
      <td>123123</td>
      <td>123123sd fgsdfg sdfgdfs d</td>
      <td>123123 sdf</td>
    </tr>
    <tr>
      <td>123123dfh dg
      <td>123123erur dh dghdfghjzrety shgfdgh dh</td>
      <td>123123s dgsdfgsdgf</td>
      <td>123123</td>
      <td>123123</td>
      <td>123123 sdfg</td>
    </tr>
    <tr>
      <td>123123zertzert zertzert zertzete reztertsdg </td>
      <td>123123</td>
      <td>123123s dgsdfgsdgf</td>
      <td>123123</td>
      <td>123123</td>
      <td>123123 sdfg</td>
    </tr>
  </tbody>
</table>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
table.tabslide {	
	margin-top:40px;
	margin-left:20px;
 
	border-collapse:collapse;
	}
.tabslide th { background:#ddd; cursor:pointer; }
.tabslide td, .tabslide th {
  width:100px;
	padding:3px;
	border: 1px solid gray;
	}
 
.tabslide thead {
border:3px solid black;
	}
.tabslide tbody {
	border:3px solid black;
	}
/* (géré en jQuery)
.tabslide th:not(:first-child), 
.tabslide tr td:not(:first-child),
.tabslide th:not(:first-child) > div, 
.tabslide tr td:not(:first-child) > div {
    display: none;
}
*/

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function slidetable(idslide) {
  var tabs = $(idslide);
 
  // ajout des div
  tabs.find('th, td').each(function() {
    $(this).html('<div>' + $(this).html() + '</div>');
  });
 
  // masquer les cellules au départ
  tabs.find('th:not(:first-child), tr td:not(:first-child),  th:not(:first-child) > div, tr td:not(:first-child) > div').css({'display':'none'});
 
  // afficher/masquer au click sur les entêtes
  tabs.on('click', 'th', function() {
   var thistab = $(this).closest('table');
   if (thistab.find('th:not(:first-child) div, tr td:not(:first-child) div').css('display') == 'block') {
      thistab.find('th:not(:first-child) div, tr td:not(:first-child) div').hide(0);
      thistab.find('td:not(:first-child), th:not(:first-child)').animate({
        width: 'toggle'
      }, 500, function() {
        // Animation complete.
        // (rien ici)
      });
    } else {
      thistab.find('td:not(:first-child), th:not(:first-child)').animate({
        width: 'toggle'
      }, 500, function() {
        // Animation complete.
        thistab.find('th:not(:first-child) div, tr td:not(:first-child) div').fadeIn();
      });
    }
  });
}
$(window).on('load', function() {
  slidetable(".tabslide"); // activation du slide
});

Ca devrait remplir le cahier des charges... et au delà :

• plusieurs tables possibles,
• HTML simplissime : juste mettre <table class="tabslide">, jQuery s'occupe du reste
• si JavaScript n'est pas actif, les tables s'affichent entièrement

Quasiment un plugin

[NoSmoking]

Pour moi ça touche à une question plus profonde : est-ce que le site doit pouvoir marcher en version « dégradée », c'est-à-dire sans JavaScript.

l'exemple fonctionne en mode sans javascript la "table" est consistante et le redimensionnement de la fenêtre ne change rien.

Oh tiens, du float, ça faisait longtemps… Je peux pas dire que j'aime l'idée.

c’est la facilité qui m'a fait mettre des float:left et ce à cause des whiteSpaces qui nous obligent à aménager le code, cela marche donc aussi bien avec des display:inline-block sur les éléments .row div et display:block, valeur par défaut, sur les éléments .row sous réserve de virer les whiteSpaces dans le code.

Une solution en CSS3 existe également mais pas très convaincu du rendu sous Chrome.

Pour moi plus le code est light plus je suis content et dans la solution que j'ai proposé j'aurais aimé ne changer que la classe du tableau plutôt que les valeurs via le script, mais là il fallait s'appuyer sur du CCS3.

[danielhagnoul]

Je salue la débauche d'énergie, de CSS et de JS ! Bel effort. Mais je préfère toujours ma solution (utilisation de la méthode fadeToggle), car elle permet de cacher une ou plusieurs colonnes d'une table existante sans rien y changer.