Création nouvelle ligne d'un tableau côté client

Version imprimable

Bonjour à tous,

J'ai trouvé un code javascript qui permet de créer des nouvelles lignes dans un tableau, côté client.
J'aimerais l'améliorer mais c'est pas facile donc je suis à la recherche d'un peu d'aide.
En fait actuellement la nouvelle ligne crée est composée de 5 colonnes avec l'élément "nouveau" écrit à l'intérieur.
Je souhaite pouvoir écrire à l'intérieur de c'est colonne, changer les valeurs toujours côté client?

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
<script language="javascript">
function test()
{
	var maligne = document.createElement("tr");
	var montexte = document.createTextNode("nouveau");
	var macell = document.createElement("td");
	macell.id="cel";
 
	macell.appendChild(montexte);
	maligne.id = "lgd"
    maligne.appendChild(macell);
	var montexte = document.createTextNode("nouveau");
	var macell = document.createElement("td");
	macell.id="cel";
 
	macell.appendChild(montexte);
	maligne.id = "lgd"
    maligne.appendChild(macell);
	var montexte = document.createTextNode("nouveau");
	var macell = document.createElement("td");
	macell.id="cel";
 
	macell.appendChild(montexte);
	maligne.id = "lgd"
    maligne.appendChild(macell);
	var montexte = document.createTextNode("nouveau");
	var macell = document.createElement("td");
	macell.id="cel";
 
	macell.appendChild(montexte);
	maligne.id = "lgd"
    maligne.appendChild(macell);
	var montexte = document.createTextNode("nouveau");
	var macell = document.createElement("td");
	macell.id="cel";
 
 
	macell.appendChild(montexte);
	maligne.appendChild(macell);
	var montab = document.getElementById("tb");
	montab.appendChild(maligne);
	maligne.visibility="visible"
}
</script>
 
<body id="b">
<form name="frm" ID="f">
<table border=1 ID="t">
<TBODY ID="tb">
<TR id="lg" align="center"><TD width="105"  bgcolor="61172d"><font face="Arial" color="white">1</font></td><td width="190">2</font></td><td width="180" >3</font></td><td width="100"><font face="Arial">4</font></td><td width="80"><font face="Arial">5</font></td></tr>
</tbody>
</table>
<input id="bt_1" TYPE="button" 	VALUE="créer" onclick="test()">
</form>

Bonjour,

il va falloir me virer tout ce HTML de présentation ! Les balises <font>, les attributs align, color, bgcolor, etc. La présentation c'est le domaine de CSS. Mets une balise <style> dans le haut de ta page et rassemble tous les styles à cet endroit, tu auras du HTML plus prorpre et ça te rendra la vie plus belle ;)

Par exemple :
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 <!DOCTYPE html> <html lang=fr> <head> <meta charset=utf-8> <title>Ajout de lignes dans un tableau</title> <style type="text/css"> body { font-family: Verdana, Helvetica, Arial, sans-serif; } table { border-collapse: collapse; text-align: center; } td { border: solid thin gray; } td:first-child { width: 105px; background-color: #61172d; color: white; } td:nth-child(2) { width: 190px; } td:nth-child(3) { width: 180px; } td:nth-child(4) { width: 100px; } td:nth-child(5) { width: 80px; } </style> <script type="text/javascript"> ... </script> </head> <body> <form name="frm" id="f"> <table id="t"> <tbody id="tb"> <tr id="lg"> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> </tbody> </table> <input id="bt_1" type="button" value="créer" onclick="test()"> </form> </body> </html>
Pour le script, je devine que tu as copié 5 fois le même bout de code. Tu vas avoir des conflits d'id, car un id doit être unique dans la page, et ton script génère plein de fois le même. Je te suggère de les retirer purement et simplement.

Si j'ai bien compris ce que tu veux faire, tu voudrais que l'utilisateur puisse modifier le contenu des cellules, par exemple en cliquant desus puis en saissant du texte, c'est bien ça ? Si oui, je propose d'utiliser des <input> déguisés.

Pour commencer, je te présente insertRow et insertCell qui vont te simplifier la vie. Ce sont des combos de createElement et appendChild.
Code:

1 2 3 4 var maligne = document.getElementById("tb").insertRow(-1); ... var macell = maligne.insertCell(-1); ...
Et pour faire la même chose 5 fois de suite, ne fatigue pas tes doigts sur le clavier, utilise une boucle for :
Code:

1 2 3 4 for (var i = 0; i < 5; i++) { var macell = maligne.insertCell(-1); ... }
Je te laisse coller les bouts ensemble, tu verras que le code est déjà beaucoup plus court :ccool:

Ensuite, ce que je te suggère avec les <input> déguisés, c'est simplement d'ajouter un <input> dans chaque cellule à la place du texte "nouveau". Tu leur rajoutes un style pour retirer leur bordure, les rendre quasiment invisibles et donner l'impression que c'est la cellule qui est directement éditable :
Code:

1 2 3 td input { border: none; color: inherit; background: inherit; }
Et en bonus, tu leur mets un attribut placeholder qui est le texte par défaut quand l'utilisateur n'a pas encore saisi de texte dedans.
Code:

1 2 3 var $input = document.createElement("input"); $input.type = "text"; $input.placeholder = "Cliquer pour éditer…";
Voilà, je t'ai quasiment tout donné, maintenant c'est à toi de jouer ;)

Pour la science je t'indique l'existence de l'attribut contentEditable. C'est quelque chose d'assez vieux mais je n'ai jamais vu personne s'en servir, alors j'en conclus qu'il y a un vice quelque part et qu'il vaut mieux s'en méfier… Peut-être que j'ai tort :roll:

24/06/2014, 14h05
SylvainPV

Citation:

Envoyé par Watilin

Pour la science je t'indique l'existence de l'attribut contentEditable. C'est quelque chose d'assez vieux mais je n'ai jamais vu personne s'en servir, alors j'en conclus qu'il y a un vice quelque part et qu'il vaut mieux s'en méfier… Peut-être que j'ai tort :roll:

Pas spécialement, c'est juste que l'UI est tellement peu ordinaire et contre-intuitive que la plupart des utilisateurs passent complètement à côté, et donc les devs ne l'utilisent quasiment pas.
24/06/2014, 14h12
Bovino

Citation:

Envoyé par Watilin

mais je n'ai jamais vu personne s'en servir

Teste l'écriture de message en mode WYSIWYG sur ce forum et tu ne pourras plus dire ça ! :aie:
24/06/2014, 17h34
Marc31

Création nouvelle ligne dans un tableau côté client

Merci pour votre aide, je vais tester tout ça et je reviens vers vous.