Ajouter dynamiquement des lignes à un tableau HTML

Version imprimable

16/11/2006, 10h31
jeannot1974

Ajouter dynamiquement des lignes à un tableau HTML

Bonjour,

je souhaiterai ajouter dynamiquement des lignes (<tr></tr>) à un tableau html (avec alternance de couleur pour chaque nouvelle ligne), à chaque fois que je clique sur un bouton... en clair mettre en place un "Partial Update" comme décrit sur http://ditch.developpez.com/javascript/partialupdate/.

Le souci c'est que j'ai une erreur "Objet attendu ligne 50, car. 3" si je teste le code fournit en exemple... et je n'arrive pas à comprendre d'où vient le problème...

Je suis sous IE5... merci de m'éclairer...
16/11/2006, 11h05
Matthieu2000

http://javascript.developpez.com/faq/?page=Table
16/11/2006, 11h07
jeannot1974

Elément de réponse...

Concernant le script cité en référence, en fait le ChangeFrameLocation est une fonction perso, il faut remplacer par document.getElementById("FrameMiseAJour").src = "file.html";

Ceci étant dit, j'ai une nouvelle erreur sur la 2e fonction (objet attendu également) :
function UpdateEtape2() {
if (obj = getObjectById('Contenu')) {
obj.innerHTML = window.frames['FrameMiseAJour'].document.body.innerHTML;
}

Et je vois toujours pas comment je pourrais gérer dynamiquement mon tableau de la page appelante...

Une idée ???
16/11/2006, 11h16
jeannot1974

Citation:

Envoyé par Matthieu2000

http://javascript.developpez.com/faq/?page=Table

Merci... je vais voir ça de suite ! ;)
16/11/2006, 17h30
jeannot1974

Table dynamique ==> Alternance couleurs pours les lignes

Citation:

Envoyé par jeannot1974

Merci... je vais voir ça de suite ! ;)

Ca correspond effectivement parfaitement avec ce que je veux faire.

Maintenant, je souhaiterai appliquer un style différent (en alternance) à chaque nouvelle ligne.
Via un champ caché, je suis en mesure de déterminer à la limite quel style appliquer, mais le souci, c'est que je ne vois pas comment en Javascript, je veux spécifier le style à appliquer au niveau de la ligne :

var newCell = newRow.insertCell(0);
newCell.innerHTML = document.all.TXTCodeProduit.value;
newCell = newRow.insertCell(1);

Ci dessus, je crée la ligne, avec autant de cellules que nécessaire, mais me reste plus qu'à spécifier le style, et je trouve de réponse à ma question...

Auriez-vous une idée ???
16/11/2006, 17h43
Matthieu2000

Citation:

newRow.className="leStyle";
16/11/2006, 17h47
jeannot1974

Efficace :)

Merci...

PS : Je ne clos pas encore le post... on ne sait jamais :lol:
17/11/2006, 15h56
jeannot1974

Suite de ma problématique tableau...

Dans les cellules que j'écris, je souhaite mettre une image... Quelle syntaxe utilisée ???

Le code ci-dessous ne fonctionne pas :(

newCell.innerHTML = "<img name='SupLig' id='SupLig' src='..\images\p-sup.gif' style='cursor:hand' alt='Supprimer la ligne'>";
17/11/2006, 16h01
Arnard

ce serait pas plu simple de mettre ton image ds un div avec un display:none ?

ainsi tu n'aurais que le display à changer pour affiher ton image
17/11/2006, 16h30
jeannot1974

Citation:

Envoyé par Arnard

ce serait pas plu simple de mettre ton image ds un div avec un display:none ?

ainsi tu n'aurais que le display à changer pour affiher ton image

En fait l'idée c'est que dynamiquement j'ajoute des lignes dans un tableau (issue d'une combo), et en fin de chaque ligne, je veux mettre un bouton qui me permette de supprimer la dite ligne si besoin...
17/11/2006, 17h05
jeannot1974

Citation:

Envoyé par jeannot1974

En fait l'idée c'est que dynamiquement j'ajoute des lignes dans un tableau (issue d'une combo), et en fin de chaque ligne, je veux mettre un bouton qui me permette de supprimer la dite ligne si besoin...

En fait ça venait que j'avais mis "\" au lieu de "/" dans le chemin... on va y arriver... :roll:

Bonne syntaxe : newCell.innerHTML = "<img src='../images/p-sup.gif' style='cursor:hand' alt='Supprimer la ligne'>";
17/11/2006, 17h18
jeannot1974

Tableau dynamique... suite

Donc maintenant j'ai mon tableau dynamique, avec mon alternance de couleur, nickel, mon bouton de suppression...

Je me pose la question de la conversion de l'alternance de couleurs de mes lignes, dès lors que j'en supprime une...
En effet si j'ai une ligne noire, puis une ligne blanche, puis une ligne noire, que je supprime la ligne blanche, j'ai alors 2 lignes noires à la suite...
Donc en fait, il me faudrait suite à la suppression, balayer tout mon tableau pour réinitialiser la couleur de ligne, et rafraichir par la même occasion, l'index identifiant le numéro de ligne (qui me sert à supprimer la ligne)...

Bon je vais y réfléchir et vous tiendrai au courant... mais je sens l'appel du week-end :)
20/11/2006, 10h51
jeannot1974

Modification de ligne dans un tableau...

Bonjour...

Dans la continuité de mes posts précédents, je cherche désormais à balayer dynamiquement mon tableau (notamment après une suppression de ligne), pour "refaire" la mise en page...

Je cherche donc un moyen de modificer le style de toute une ligne (<tr>...</tr>), avec une fonction du même genre que insertRow(), deleteRow()...

PS : Désolé, mais j'suis débutant, et je me pose les questions, tout en cherchant de mon côté (et surtout en cherchant à gagner du temps en demandant à ceux qui savent...).

Merci bien...
20/11/2006, 13h50
Matthieu2000

http://www.developpez.net/forums/sho...mentsByTagName

Résultat des courses

Pour info, voici ce qui a finalement était écrit (ça peut toujours servir à quelqu'un) :

A noter, que le nombre de lignes du tableau, est stocké dans un champ caché, pour divers traitements (y compris hors mise en page), nommé "HIDNbLignes".

Fonction de suppression de ligne avec remise en page :

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
 
function SupprimerLignes(num_ligne)
{
	var nbrLignes;
	var cTabLign;
	var iLign;
	var iCodPdt;
	document.getElementById('TBLlignes').deleteRow(num_ligne);
	nbrLignes = document.getElementById('HIDNbLigne').value;
	nbrLignes--;
	document.getElementById('HIDNbLigne').value = nbrLignes;
	//On refait la mise en page du tableau
	for (var i = 1; i <= nbrLignes; i++) {
		if (i%2==0) {
			cTabLign = "cTabLigP";
		}
		else {
			cTabLign = "cTabLigI";
		}
		//Récupération du contenu de la ligne
		iLign = document.getElementById('TBLlignes').rows[i];
		//Récupération du Code Produit de la ligne
		iCodPdt = document.getElementById('TBLlignes').rows[i].cells[0].innerHTML;
		//Affectation nouveau style à la ligne en cours de traitement
		iLign.className = cTabLign;
        iLign.cells[2].innerHTML = "<img src='../images/p-sup.gif' style='cursor:hand' alt='Supprimer la ligne : "+iCodPdt+"' onclick='javascript:SupprimerLignes("+i+")'>";
    }
}

Fonction appelée lors du clic sur un bouton d'ajout de produit (dont on récupère les infos dans une combo) :

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
 
function AjouterLignes(co_pdt)
{
	var nbrLignes;
	var cTabLign;
	if (document.all.TXTCodeProduit.value=='') {
		alert("Aucun Produit n'est sélectionné");
	}
	else {
		nbrLignes = document.getElementById('HIDNbLigne').value;
		if (document.getElementById('HIDNbLigne').value=='0') {
			document.getElementById('DIVlignes').style.visibility='visible';
			document.getElementById('DIVlignes').style.display='block';
		}
		nbrLignes++;
		document.getElementById('HIDNbLigne').value = nbrLignes;
 
		//Détermination de la couleur de ligne du tableau
		if (nbrLignes%2==0) {
			cTabLign = "cTabLigP";
		}
		else {
			cTabLign = "cTabLigI";
		}
 
		//Ajout d'une ligne au tableau (en fin de tableau)
		var newRow = document.getElementById('TBLlignes').insertRow(-1);
		newRow.className=cTabLign; 
		var newCell = newRow.insertCell(0);
		newCell.innerHTML = document.all.TXTCodeProduit.value;
		newCell.align="center";
		newCell = newRow.insertCell(1);
		newCell.innerHTML = document.all.CMBProduit.options[document.all.CMBProduit.selectedIndex].text;
		newCell = newRow.insertCell(2);
		newCell.align="center";
		newCell.innerHTML = "<img src='../images/p-sup.gif' style='cursor:hand' alt='Supprimer la ligne : "+document.all.TXTCodeProduit.value+"' onclick='javascript:SupprimerLignes("+nbrLignes+")'>";
	}
}

En espérant que cela sera utile à quelqu'un... et merci à tous pour vos coups de pouce...