Afficher cellule d'un tableau

**sebaaas** · 02/10/2007, 19h52

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 :

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
 
<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

**cadoudal56** · 02/10/2007, 21h42

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 :

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
 
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 :

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

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

**beekeep** · 02/10/2007, 22h39

lut,

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

(page fonctionnelle en pj)

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
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>

;)

**sebaaas** · 03/10/2007, 20h39

Merci beaucoup pour vos réponses

... celle que j'ai utilisé

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
 
<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

Afficher cellule d'un tableau

JavaScript

Discussions similaires

Partager

Partager