Afficher cellule d'un tableau

Version imprimable

Bonjour à tous,

J'ai une tout simple page HTML composé d'un tableau de 2 colonnes et de beaucoup de ligne. Dans chaque cellule j'ai un Input type="text".

Je souhaite (en Javascript ou CSS) masquer toute les lignes sauf la première. Dès que je tape qqc dans la 1er ligne (dans une des 2 colonnes) il faudrait que la 2ème ligne apparaisse.

Et ensuite de même : dès que je tappe dans une ligne, il faut que la ligne suivante apparaisse.

Voici mon code en HTML
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <html> <head></head> <body> <form method="POST" action="bd.php"> <table> <tr><td>Marque<input type="text" id="1" name="1"> <td>Produit<input type="text" id="2" name="2"></tr> <tr><td>Marque<input type="text" id="3" name="3"> <td>Produit<input type="text" id="4" name="4"></tr> <tr><td>Marque<input type="text" id="5" name="5"> <td>Produit<input type="text" id="6" name="6"></tr> ... </table> <input type="submit" name="submit" value="Envoyer" /> </form> </html>
j'ai pensé qu'avec un onfcus, je pouvait faire qqc mais je ne vois pas vraiment comment :-s

Je ne sais pas si je suis dès plus clair.

D'avance merci beaucoup de voter aide

Hello,

A mon avis le tableau est une mauvaise idée, tu dois passer par des DIV pour faire ce que tu souhaites.

Tout d'abord colle ce javascript dans ta page (ou dans un fichier externe)

Code:

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
 
function writeCookie(name, data, noDays){
  var cookieStr = name + "="+ data
  if (writeCookie.arguments.length > 2){
    cookieStr += "; expires=" + getCookieExpireDate(noDays)
    }
  document.cookie = cookieStr
}
 
function readCookie(cookieName){
   var searchName = cookieName + "="
   var cookies = document.cookie
   var start = cookies.indexOf(cookieName)
   if (start == -1){ // cookie not found
     return ""
     }
   start += searchName.length //start of the cookie data
   var end = cookies.indexOf(";", start)
   if (end == -1){
     end = cookies.length
     }
   return cookies.substring(start, end)
}
 
function blocking(nr, cookie, vis_state)
{
        if (document.layers)
        {
                current = (document.layers[nr].display == 'none') ? vis_state : 'none';
                if (cookie != '')
                        writeCookie(nr, current);
                document.layers[nr].display = current;
        }
        else if (document.all)
        {
                current = (document.all[nr].style.display == 'none') ? vis_state : 'none';
                if (cookie != '')
                        writeCookie(nr, current);
                document.all[nr].style.display = current;
        }
        else if (document.getElementById)
        {
                display = (document.getElementById(nr).style.display == 'none') ? vis_state : 'none';
                if (cookie != '')
                        writeCookie(nr, display);
                document.getElementById(nr).style.display = display;
        }
}

Et par la suite, voici le code que tu devras répéter :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
<div id="bloc1">
Marque<input type="text" id="1" name="1" onfocus="blocking('bloc2','yes', 'block');">
Produit<input type="text" id="2" name="2">
</div>
<div id="bloc2" style="display:hidden;">
Marque<input type="text" id="1" name="1" onfocus="blocking('bloc3','yes', 'block');">
Produit<input type="text" id="2" name="2">
</div>
<div id="bloc3" style="display:hidden;">
Marque<input type="text" id="1" name="1" onfocus="blocking('bloc4','yes', 'block');">
Produit<input type="text" id="2" name="2">
</div>

@+
cadou

lut,

une solution proche avec peu être un peu moins de code :

(page fonctionnelle en pj)

Code:

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
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test • test</title>
 
<script type="text/javascript">
<!--
window.onload=HideLines;
function HideLines(id) {
for (var i = 1; i<=5; i++){
    if (document.getElementById('level'+i))
    {
    document.getElementById('level'+i).style.display='none';
    }
}}
function DisplayLevel(id) {
var d = document.getElementById(id);
for (var i = 1; i<=id; i++){
    if (document.getElementById('level'+i))
    {
    document.getElementById('level'+i).style.display='block';
    }
}}
//-->
</script>
<style>
* {
padding: 0;
margin: 0;
}
</style>
</head>
 
<body><center>
 
    <p>- Titre 1 <input type="text" onchange="javascript:DisplayLevel(1);" /></p>
    <dd id="level1">
 
            <p>- Titre 2 <input type="text" onchange="javascript:DisplayLevel(2);" /></p>
            <dd id="level2">
 
                    <p>- Titre 3 <input type="text" onchange="javascript:DisplayLevel(3);" /></p>
                    <dd id="level3">
 
                            <p>- Titre 4 <input type="text" /></p>
 
                    </dd>
 
            </dd>
 
    </dd>
 
 
</center></body>
</html>

;)

Merci beaucoup pour vos réponses

... celle que j'ai utilisé

Code:

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
 
<script type="text/javascript">
 
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "inline" ;
} else {
targetElement.style.display = "inline" ;
}
}
 
</script>
 
<html>
<head></head>
<body>
 
<form method="POST" action="bd.php">
 
<div id="1" style="display:inline;">Marque<input  name="1" onfocus="visibilite('2');"> <input  name="1bis"></div>
 
<div id="2" style="display:none;">Marque<input name="2" onfocus="visibilite('3');" ><input name="2bis" onfocus="visibilite('3');"></div>
 
<div id="3" style="display:none;">Marque<input name="3" onfocus="visibilite('4');" ><input name="3bis" onfocus="visibilite('4');"></div>
 
...
 
<input type="submit" name="submit" value="Envoyer" />
</form>
</html>

Merci pour vos réponses