Afficher, ou pas, une partie d'un tableau

**Bugger24** · 08/09/2010, 11h26

Bonjour a tous,

Je débute en JS ...

J'ai un tableau HTML qui est composé de 5 lignes. Dans la seconde j'ai 2 boutons radio. Je souhaiterai, en javascript bien entendu, en fonction du bouton radio sélectionne rendre ou ne pas rendre visible les 3 dernières lignes du tables.

Code :

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
 
<table>
    <tr>
        <td>Ligne1</td>
    </tr>
    <tr>
        <td>Afficher <input type="radio" name="affiche" value="1"</td>
        <td>Ne pas afficher <input type="radio" name="affiche" value="0"</td>
    </tr>
    <tr>
        <td>Ligne3</td>
    </tr>
    <tr>
        <td>Ligne4</td>
    </tr>
    <tr>
        <td>Ligne5</td>
    </tr>
</table>

Merci d'avance.

**SpaceFrog** · 08/09/2010, 11h52

Code :

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
<script type='text/javascript'>
function toggle(show){
var i=0
while(document.getElementById('tr'+(++i))){
document.getElementById('tr'+(i)).style.display=(!show)?'none':'';
}
 
}
 
</script>
</head>
 
<body>
 
<table>
    <tr>
        <td>Ligne1</td>
    </tr>
    <tr>
        <td>Afficher <input type="checkbox" name="affiche" value="1" checked="checked" onclick="toggle(this.checked)"/></td>
          </tr>
    <tr id="tr1">
        <td>Ligne3</td>
    </tr>
    <tr id="tr2">
        <td>Ligne4</td>
    </tr>
    <tr id="tr3">
        <td>Ligne5</td>
    </tr>
</table>
 
</body>
 
</html>

**Bugger24** · 08/09/2010, 12h42

Merci pour cette fonction, ça résoud bien mon problème

Afficher, ou pas, une partie d'un tableau

JavaScript

Vue hybride

Discussions similaires

Partager

Partager