CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2010 02 10 12:40:21

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

UN TABLEAU ENCORE PLUS MODIFIABLE

Information sur la source

Note :

4,50 / 10

Catégorie :Divers Classé sous :tableau dynamique, insertRow, deleteRow, rowIndex, déplacement ligne Niveau :Débutant Date de création :20/03/2008 Date de mise à jour :21/03/2008 13:05:02 Vu / téléchargé :7 501 / 469

Auteur : oufnomore

Ecrire un message privé

Commentaire sur cette source (10)

Ajouter un commentaire et/ou une note

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

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

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

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

btn_add0.jpg 830 octets
btn_add1.jpg 776 octets
btn_del0.jpg 818 octets
btn_del1.jpg 796 octets
btn_down0.jpg 824 octets
btn_down1.jpg 804 octets
btn_up0.jpg 830 octets
btn_up1.jpg 807 octets
tab2.htm 9 907 octets

Télécharger le zip

Historique

20 mars 2008 11:39:12 :: - petit oubli dans le code (incrémentation du compteur de lignes quand on ajoute ou supprime) - ajout de la source dans.... la source...
21 mars 2008 13:05:03 :: petite correction dans la source, merci d'avoir remarqué ça lakichemole, je mettrais à jour le .zip dans l'après-midi

Sources de la même categorie

MOOTABLEAU par Miky76

CALCULER VOTRE IMC par lesnouesremy

CONSOLE DOS par djebbipgm

PLUGIN JQUERY ARTE: AJOUTER DU TEMPS REEL SUR VOS PAGES WEB par arthurobriot

FAIRE UN FILTRE DES VILLES par scropfi01

Toutes les sources de la catégorie Divers

Commentaires et avis

Commentaire de coucou747 le 21/03/2008 06:44:10

tu devrais mettre a jours ton ancienne source et faire supprimer celle ci...

Commentaire de lakichemole le 21/03/2008 10:16:48 4/10

  Un petit bug chez moi (deboggeur activé IE6) getel renvoi un objet en passant son id en paramètre alors pourquoi tu lui fait un "++" ou un "--" getel('cnt')++; ??
  En tout cas le deboggeur me dis que tu ne peut pas le faire (l'objet récupéré par la fonction étant un input). Sinon le principe est pas mal :) .
  Par contre il serait bien qu'on puisse choisir un template/model de ligne et pas que le contenu de la ligne soit en dure dans le code des fonctions. Je dis ça car dans mon taff on a eu cette problématique il m'a donc fallu faire des templates de lignes se qui rend la fonction de copie/ajout beaucoup plus générique tu devrais essayer de faire le même principe.:)

Commentaire de oufnomore le 21/03/2008 13:03:04

C'est simplement qu'en corrigeant ma source après l'avoir validée la première fois, j'ai oublié le .value ... pardon pour cet oubli..
getel('cnt').value++; ça doit en effet mieux marcher :)
je vais corriger ça
je vais peut-être aussi fusionner mes deux sources comme me l'indique coucou747
et peut-être aussi suivre ton conseil lakichmole, mais là ce n'était pas mon but dans cet exemple..
moi j'utilise ce type tableau sur mon site perso, avec simplement une petite classe mysql et quelques fonctions, le tout en ajax, sans utiliser de système de template mais en tentant de m'en rapprocher, tout à la mano (pas trés propre, mais ça me forme on va dire), du coup la gestion du contenu des cellules est trés spécifique pour chacun de mes tableaux...
tu aurais éventuellement une piste ? une petite précaunisation sur la manière de faire, globalement ?

Commentaire de lakichemole le 21/03/2008 13:49:38

En fait au début pour mon projet je voulais faire un template sous forme de xml genre :
<template id='1'>
  <tr>
    <td>
      <span>Toto</span>
    </td>
    <td>
      <input type='button' value='ajouter' />
    </td>
  </tr>
</template>

et pour caque ligne son template sous cette forme apres garce à une JS tu le parse et tu créé ta ligne avec ça.
et après sur l'ajout de ligne tu appel ta fonction comme cela:
function addRow(nTable,idTemplate);
J'espère que tu ma compris^^

Commentaire de oufnomore le 21/03/2008 15:27:32

carrément, yes, bien vu, je vais même je crois m'y mettre au plus vite :) merci

Commentaire de lakichemole le 21/03/2008 15:48:47

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>
      <span>Toto</span>   ==> myTd.innerHTML="<span>Toto</span>";
    </td>
Il vaut mieu faire:
    <td>
      <span>Toto</span>   ==> 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!

Commentaire de oufnomore le 21/03/2008 18:28:01

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

Commentaire de oufnomore le 21/03/2008 18:31:51

mais tu as raison, je vais peut être essayer avec le DOM, pour apprentissage quoi

Commentaire de BaFM le 24/03/2008 12:26:15

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.

Commentaire de kitty85 le 18/07/2008 17:09:43 5/10

Merci pour ce code très pratique.
J'aimerais savoir comment colorier une ligne sur deux dans le tableau...
Merci

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Methode .deleteRow() [ par ogas430 ] Bonjour !J'ai deja ouvert la fenetre et je ne vais pas tarder à sauter ...Voila mon probleme : je veux efffacer tous les tr composant un tbody ( qui s Conpatibilite avec firefox [ par Genepi38 ] quelqu'un saurai-t-il me dire pourquoi firefox ne veux pas afficher ce code il dit que le contexe global n'est pas bon qu'il faut utiliser document.ge

Nos sponsors

Derniers Blogs

TECHDAYS PARIS 2010 : PLEINIèRE DERNIER JOUR par ROMELARD Fabrice

UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante

TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice

[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion

TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice

Forum

COUPER UNE PARTIE DE CHAINE par bydouille

JE VEUX LE CODE D'ANNIMATION AVEC JAVASCRIPT par dalinda

J'AI TROUVéE UN CODE SOURCE SUR INTERNET ET J'AI PAS LE COMPRIS par dalinda

RE : RéCUPERER LA TAILLE D'UN DIV par bumbo

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Module sur Prestashop
Budget : 700€
Redaction d-une page de vente pour un ebook
Budget : 300€
module flash de personalisation
Budget : 600€

Logiciels

DB-MAIN (9.1.0)
DB-MAIN (9.1.0)

DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal...

Cliquez pour télécharger DB-MAIN
Xilisoft DPG Convertisseur (5.1.37.0120)
XILISOFT DPG CONVERTISSEUR (5.1.37.0120)

Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé...

Cliquez pour télécharger Xilisoft DPG Convertisseur
GraphicsGale (2.01.01)
GRAPHICSGALE (2.01.01)

GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ...

Cliquez pour télécharger GraphicsGale
Architecte 3D (Platinum 2010)
ARCHITECTE 3D (PLATINUM 2010)

Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é...

Cliquez pour télécharger Architecte 3D
TeamViewer 5 (TeamViewer 5)
TEAMVIEWER 5 (TEAMVIEWER 5)

Dépanner un ami,expliquer une manipulation devient un jeu d'enfant. Prise en main d'un autre ord...

Cliquez pour télécharger TeamViewer 5