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>