Un tableau encore plus modifiable

Soyez le premier à donner votre avis sur cette source.

Vue 15 361 fois - Téléchargée 1 084 fois

Description

Voici un autre petit tableau HTML.
On peut ajouter des lignes, en supprimer.
On peut aussi déplacer les lignes dans le tableau.
Utilisation du rowIndex, insertRow, deleteRow.

Un bouton permet l'ajout de lignes.
Le tableau est composé de deux colonnes.
Dans la seconde colonne, un bouton permet de supprimer la ligne courante.
Un second bouton permet de déplacer la ligne courante vers le haut.
Un troisième bouton permet de déplacer la ligne courante vers le bas.

Là encore, sans aucune prétention car le code n'est pas trés joli, le but est d'aider ceux qui auraient eu comme moi du mal à comprendre l'utilisation d'insertRow deleteRow et rowIndex pour rendre un tableau "dynamique".

Source spécial débutant pouvant servir d'exemple, donc.

Les commentaires sont ce qu'ils sont : explicites, sans plus (peut-être parfois rébarbatifs), mais doivent suffir pour bien comprendre la mécanique.

Il y a certainement une manière plus propre de faire, ou plus "simple", avec moins de code, mais personnellement, j'ai du mal avec les parentNode.parentNode....

J'avais besoin d'un tableau fonctionnant sur ce principe, j'ai pas réussi à trouver un truc clé en main, alors je l'ai fait et je me dis qu'il peut être utile à d'autres.

Tout commentaire est le bienvenu.

(pas testé sous IE)

Source / Exemple :


<html><head><title></title></head>
<body>
	
<img id="btn_add" src="btn_add1.jpg" onclick="addRow('table0');" onmouseover="btn_light('btn_add',-1,0);" onmouseout="btn_light('btn_add',-1,1);">

<input id="cnt" type="hidden" value="4">

<!-- création du tableau avec 4 lignes au départ -->
<table id="table0" border="0">
<tbody>
<tr id="tr1"> 
	<!-- la première cellule contient du texte affichant le numéro de la ligne
             ainsi que deux input text -->
	<td id="td1">ligne n° 1<input type="text" id="iA1"><input type="text" id="iB1"></td>
	<!-- la seconde cellule contient un bouton qui permet de supprimer la ligne en cours 
             un bouton qui permet de monter la ligne 
             et un bouton qui permet de descendre la ligne -->
	<td id="tdL1">
		<img id="btn_del1" src="btn_del1.jpg" onclick="delRow('table0',1);" onmouseover="btn_light('btn_del',1,0);" onmouseout="btn_light('btn_del',1,1);">
		<img id="btn_up1" src="btn_up1.jpg" onclick="move('table0',1,-1);" onmouseover="btn_light('btn_up',1,0);" onmouseout="btn_light('btn_up',1,1);">
		<img id="btn_down1" src="btn_down1.jpg" onclick="move('table0',1,1);" onmouseover="btn_light('btn_down',1,0);" onmouseout="btn_light('btn_down',1,1);">
	</td>
</tr>
<tr id="tr2"> 
	<td id="td2">ligne n° 2<input type="text" id="iA2"><input type="text" id="iB2"></td>	
	<td id="tdL2">
		<img id="btn_del2" src="btn_del1.jpg" onclick="delRow('table0',2);" onmouseover="btn_light('btn_del',2,0);" onmouseout="btn_light('btn_del',2,1);">
		<img id="btn_up2" src="btn_up1.jpg" onclick="move('table0',2,-1);" onmouseover="btn_light('btn_up',2,0);" onmouseout="btn_light('btn_up',2,1);">
		<img id="btn_down2" src="btn_down1.jpg" onclick="move('table0',2,1);" onmouseover="btn_light('btn_down',2,0);" onmouseout="btn_light('btn_down',2,1);">
	</td>
</tr>
<tr id="tr3"> 
	<td id="td3">ligne n° 3<input type="text" id="iA3"><input type="text" id="iB3"></td>	
	<td id="tdL3">
		<img id="btn_del3" src="btn_del1.jpg" onclick="delRow('table0',3);" onmouseover="btn_light('btn_del',3,0);" onmouseout="btn_light('btn_del',3,1);">
		<img id="btn_up3" src="btn_up1.jpg" onclick="move('table0',3,-1);" onmouseover="btn_light('btn_up',3,0);" onmouseout="btn_light('btn_up',3,1);">
		<img id="btn_down3" src="btn_down1.jpg" onclick="move('table0',3,1);" onmouseover="btn_light('btn_down',3,0);" onmouseout="btn_light('btn_down',3,1);">
	</td>
</tr>
<tr id="tr4"> 
	<td id="td4">ligne n° 4<input type="text" id="iA4"><input type="text" id="iB4"></td>	
	<td id="tdL4">
		<img id="btn_del4" src="btn_del1.jpg" onclick="delRow('table0',4);" onmouseover="btn_light('btn_del',4,0);" onmouseout="btn_light('btn_del',4,1);">
		<img id="btn_up4" src="btn_up1.jpg" onclick="move('table0',4,-1);" onmouseover="btn_light('btn_up',4,0);" onmouseout="btn_light('btn_up',4,1);">
		<img id="btn_down4" src="btn_down1.jpg" onclick="move('table0',4,1);" onmouseover="btn_light('btn_down',4,0);" onmouseout="btn_light('btn_down',4,1);">
	</td>
</tr>
</tbody>
<script>
	// fonction getelement
	function getel(elm) {
		return document.getElementById(elm);
	}
	// fonction bidon pour faire flasher les boutons
	function btn_light(btn,idx,i) {
		if (idx != -1) {
			getel(btn + idx).src = btn + i + '.jpg';
		} 
		else {
			getel(btn).src = btn + i + '.jpg';
		}			
	}
	// fonction d'ajout d'une ligne 
	function addRow(nTable) {
		var ta = getel(nTable);
		// insertion de la ligne en fin de tableau
		var myRow = ta.insertRow(-1);
		// récupération de l'index de la ligne insérée, et on ajoute 1 car on souhaite un tableau allant de la ligne 1 à n
		var idx = myRow.rowIndex + 1;
		// insertion d'une cellule sur la ligne
		var myCell = myRow.insertCell(-1);
		// remplissage de la première cellule avec le texte et les input
		// les identifiants des objets générés contiennent le rowIndex(+1) de la ligne insérée
		myCell.innerHTML = 'ligne n° ' + idx + '<input type="text" id="iA' + idx + '"><input type="text" id="iB' + idx + '">';
		// insertion d'une seconde cellule sur la ligne
		myCell = myRow.insertCell(-1);
		// remplissage de la seconde cellule avec les boutons
		// de la même manière, les identifiants des objets img générés contiennent le rowIndex(+1) de la ligne insérée
		myCell.innerHTML = '<img id="btn_del' + idx + '" src="btn_del1.jpg" onclick="delRow(\'table0\',' + idx + ');" onmouseover="btn_light(\'btn_del\',' + idx + ',0);" onmouseout="btn_light(\'btn_del\',' + idx + ',1);"> <img id="btn_up' + idx + '" src="btn_up1.jpg" onclick="move(\'table0\',' + idx + ',-1);" onmouseover="btn_light(\'btn_up\',' + idx + ',0);" onmouseout="btn_light(\'btn_up\',' + idx + ',1);"> <img id="btn_down' + idx + '" src="btn_down1.jpg" onclick="move(\'table0\',' + idx + ',1);" onmouseover="btn_light(\'btn_down\',' + idx + ',0);" onmouseout="btn_light(\'btn_down\',' + idx + ',1);">';
		getel('cnt').value++;
	}
	// fonction de supression d'une ligne
	function delRow(nTable,idx) {
		var ta = getel(nTable);
		// suppression de la ligne
		// on souhaite supprimer la ligne dont l'index (partant de zéro) correspond à la ligne sur laquelle on a cliqué
		// comme au niveau affichage on a nos lignes numérotées de 1 à n, on retranche 1
		ta.deleteRow(idx-1);
		// boucle sur toutes les lignes du tableau en partant de 1
	   	for (i=0;i<ta.tBodies[0].rows.length;i++) {
			var j = i + 1;
			// on remet à niveau l'identifiant de la ligne et des cellules avec l'index de la boucle
			ta.tBodies[0].rows[i].id='tr' + j;
			ta.tBodies[0].rows[i].cells[0].id='td' + j;
			ta.tBodies[0].rows[i].cells[1].id='tdL' + j;
			// dans la première cellule on remet à niveau le texte affiché et les identifiants des objets input
			// sans oublier de récupérer les informations qui auraient pu être saisies dans les input
			var ins = ta.tBodies[0].rows[i].cells[0].getElementsByTagName('input');
			ta.tBodies[0].rows[i].cells[0].innerHTML = 'ligne n° ' + j + '<input type="text" id="iA' + j + '" value="' + ins[0].value + '"><input type="text" id="iB' + j + '" value="' + ins[1].value + '">';
			// dans la seconde cellule, on remet à niveau les identifiants des objets img
			ta.tBodies[0].rows[i].cells[1].innerHTML = '<img id="btn_del' + j + '" src="btn_del1.jpg" onclick="delRow(\'table0\',' + j + ');" onmouseover="btn_light(\'btn_del\',' + j + ',0);" onmouseout="btn_light(\'btn_del\',' + j + ',1);"> <img id="btn_up' + j + '" src="btn_up1.jpg" onclick="move(\'table0\',' + j + ',-1);" onmouseover="btn_light(\'btn_up\',' + j + ',0);" onmouseout="btn_light(\'btn_up\',' + j + ',1);"> <img id="btn_down' + j + '" src="btn_down1.jpg" onclick="move(\'table0\',' + j + ',1);" onmouseover="btn_light(\'btn_down\',' + j + ',0);" onmouseout="btn_light(\'btn_down\',' + j + ',1);">';
		}
		getel('cnt').value--;
	}
	// fonction pour déplacer une ligne le paramètre idx contient le numéro de la ligne sur laquelle on a cliqué (numérotation en partant de 1)
	function move(nTable,idx,sens) {		
		var ta = getel(nTable);
		// récupération de toutes les lignes du tableau dans un array
		var trs = ta.tBodies[0].getElementsByTagName('tr');
		// positionnement de l'index de la ligne sur laquelle on a cliqué
		var idxA = idx - 1;
		// récupération dans une variable du contenu de la ligne qui va être "déplacée"
		var tr = trs[idxA].innerHTML;
		// récupération des valeurs saisies dans les input
		var ins = trs[idxA].getElementsByTagName('input');
		// positionnement de l'index de la ligne cible pour le déplacement
		var idxB = idxA + sens;
		// on détermine si on se trouve sur la première ou dernière ligne, de manière à ne pas permettre le déplacement en dehors du tableau
		var dontmove = 0;
		if (idx==1) {
			if (sens==-1) dontmove++;
		}
		if (idx==getel('cnt').value) {
			if (sens==1) dontmove++;
		}
		if (dontmove==0) {
			// suppression de la ligne
			ta.deleteRow(idxA);
			// insertion d'une nouvelle ligne à l'index
			ta.insertRow(idxB);
			// remplissage de la ligne
			trs[idxB].innerHTML = tr;
			// on repositionne les valeurs éventuellement saisies dans les input
			trs[idxB].getElementsByTagName('input')[0].value = ins[0].value;
			trs[idxB].getElementsByTagName('input')[1].value = ins[1].value;
			// boucle sur toutes les lignes du tableau avec petite transposition pour la numérotation affichée des lignes
		   	for (i=0;i<ta.tBodies[0].rows.length;i++) {
				var j = i + 1;
				// on remet à niveau l'identifiant de la ligne et des cellules avec l'index de la boucle +1
				ta.tBodies[0].rows[i].id='tr' + j;
				ta.tBodies[0].rows[i].cells[0].id='td' + j;
				ta.tBodies[0].rows[i].cells[1].id='tdL' + j;
				// dans la première cellule on remet à niveau le texte affiché et les identifiants des objets input
				// sans oublier de récupérer les informations qui auraient pu être saisies dans les input
				var ins = ta.tBodies[0].rows[i].cells[0].getElementsByTagName('input');
				ta.tBodies[0].rows[i].cells[0].innerHTML = 'ligne n° ' + j + '<input type="text" id="iA' + j + '" value="' + ins[0].value + '"><input type="text" id="iB' + j + '" value="' + ins[1].value + '">';
				// dans la seconde cellule, on remet à niveau les identifiants des objets img
				ta.tBodies[0].rows[i].cells[1].innerHTML = '<img id="btn_del' + j + '" src="btn_del1.jpg" onclick="delRow(\'table0\',' + j + ');" onmouseover="btn_light(\'btn_del\',' + j + ',0);" onmouseout="btn_light(\'btn_del\',' + j + ',1);"> <img id="btn_up' + j + '" src="btn_up1.jpg" onclick="move(\'table0\',' + j + ',-1);" onmouseover="btn_light(\'btn_up\',' + j + ',0);" onmouseout="btn_light(\'btn_up\',' + j + ',1);"> <img id="btn_down' + j + '" src="btn_down1.jpg" onclick="move(\'table0\',' + j + ',1);" onmouseover="btn_light(\'btn_down\',' + j + ',0);" onmouseout="btn_light(\'btn_down\',' + j + ',1);">';
			}
		}
	}
</script>
</body>
</html>

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
6
Date d'inscription
samedi 12 juillet 2008
Statut
Membre
Dernière intervention
18 juillet 2008

Merci pour ce code très pratique.
J'aimerais savoir comment colorier une ligne sur deux dans le tableau...
Merci
Messages postés
64
Date d'inscription
mercredi 24 juillet 2002
Statut
Membre
Dernière intervention
26 novembre 2009

Pour ajouter un texte dans un élément, il est préférable de créer un TextNode (document.createTextNode).
Ton template de tableau, que tu peux mettre dans un fichier, tu peux le charger à partir d'une iframe que tu masque et récupérer le contenu du body et des sous parties afin de les cloner et les associer à ton document principal pour pouvoir les insérer comme bon te semble sans recréer complètement. Et par ca, il t'es plus facile de savoir où est quoi.
Pour les fonctions, voir les définitions IDL de DOM en core et HTML. Normalement, toutes ces fonctions sont disponible quelque soit le navigateur, en admettant qu'il supporte la version de DOM choisi.
Messages postés
15
Date d'inscription
mercredi 20 novembre 2002
Statut
Membre
Dernière intervention
21 mars 2008

mais tu as raison, je vais peut être essayer avec le DOM, pour apprentissage quoi
Messages postés
15
Date d'inscription
mercredi 20 novembre 2002
Statut
Membre
Dernière intervention
21 mars 2008

l'ennui c'est qu'en réalité dans les lignes de mes tableau je n'ai pas que deux colonnes avec deux pauvres input et deux pauvres boutons...
j'ai plutôt des tableaux ressemblant à un mix de mes deux pauvres sources, avec plusieurs colonnes et différents comportements...
l'utilisation du DOM m'embête un peu dans ce cas là, ça devient vite fastidieux, et je ne vois pas vraiment de valeur ajoutée car en passant par mes innerHTML, du moment que je regénère les identifiants des objets créés
là si j'dois refaire cette source en utilisant le DOM, je vois pas du tout comment faire pour le move()
pour le coup j'ai déposé cette source pour montrer (et aussi m'habituer à) l'utilisation des insertRow deleteRow et rowIndex
je peux la faire supprimer si vous me dites que "ça s'fait plus en 2008"
le php/javascript j'y touche environ 1 fois tous les 2 ans, pas assez pour bien connaître toutes les bonnes pratiques...
Messages postés
253
Date d'inscription
vendredi 13 juin 2003
Statut
Membre
Dernière intervention
18 mai 2009

A oui et encore un truc n'utilise pas le .innerHTML="content" pour rajouter du contenu mais recré plutôt (pas le chien de mickey hein!) les objets du contenu et ajoute les à ta cellule.
Je m'explique pour rajouter le span dans la td de l'exemple de mon dernier post toi tu fais:
<td>
Toto ==> myTd.innerHTML="Toto";
</td>
Il vaut mieu faire:
<td>
Toto ==> mySpan=document.createElement('span');
</td> mySpan.value='Toto' //ou mySpan.innerText='Toto' je sais plus
myTd.appendChild(mySPan);
Ca fait plus 'objet' comme approche :)
Dans ton code à la ligne 132 tu fais:
"trs[idxB].innerHTML = tr;"
dans la fonction move et ça m'envoi un message d'erreur en debuggant vite fait il semble que y une entourloupe dans le contenu de tr.
Voila bon courage!
Afficher les 10 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.