Discussion :

[Robjerey]

Bonjour.

Ci-dessous mon code HTML :

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
<table id="premier">
        <tr>
        <td>oneTest</td>
                <td> contenu1 </td>             
            </tr>       
            <tr>
                <td>twoTest</td>
                <td>contenu2</td>              
            </tr>
            </table>
<table id="deuxieme" style="visibility:hidden">
            <tr>
            <td>autreTest</td>
             <td>encoreTest   </td> 
           </tr> </table>
<input type="button" value="Suivant" onclick="suivant()" />

Ci-dessous mon code JavaScript:

Code JavaScript :

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

1
2
3
function suivant() {
document.getElementById("premier").style.visibility = "hidden";
            document.getElementById("deuxieme").style.visibility = "visible";}

Mais, le deuxième tableau apparaît en dessous du premier tableau qui a disparu.

Comment faire, s'il vous plaît, pour que le deuxième tableau apparaisse à la place du premier tableau qui a disparu, c'est-à-dire non pas en dessous, mais au même niveau (comme s'il s'agissait StackPanel) ?

Merci.

[numew]

La propriété "visibility:hidden" masque un élément mais laisse l'espace qu'il occupe disponible, pour le faire "disparaitre" on peut utiliser à la place "display:none"

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
<table id="premier">
        <tr>
        <td>oneTest</td>
                <td> contenu1 </td>             
            </tr>       
            <tr>
                <td>twoTest</td>
                <td>contenu2</td>              
            </tr>
            </table>
<table id="deuxieme" style="display:none;">
            <tr>
            <td>autreTest</td>
             <td>encoreTest   </td> 
           </tr> </table>
<input type="button" value="Suivant" onclick="suivant()" />

Code :

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

1
2
3
4
5
 
    function suivant() {
        document.getElementById("premier").style.display = "none";
        document.getElementById("deuxieme").style.display = "table";
    }