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

Ce site au démarrage

begin process at 2012 02 14 11:50:01

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é :10 367 / 632

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

COLONNES ADAPTABLES EN HAUTEUR par dronoide

VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES par william voirol

HTML5 PLAYER par kazma

SCROLLBAR PERSONNALISABLE par kazma

INFO BULLE par RudiRatlos

Toutes les sources de la catégorie Divers

Commentaires et avis

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

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

SLIDE & DéMO TECHDAYS 2012 - FAST & FURIOUS XAML APPS par Vko

XNA IS DEAD! par richardc

TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 ! par ROMELARD Fabrice

[HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE) par Gio

TECHDAYS PARIS 2012 : CHUCK MORRIS N'A PAS PEUR DES MALWARES, CE SONT LES MALWARES QUI ONT PEUR DE CHUCK MORRIS par ROMELARD Fabrice

Forum

RE : MENU VERTICAL DéROULANT par lordmacrage

RE : REMPLACER UN SOUS CHAINE DANS UNE AUTRE par Renfield

REMPLACER UN SOUS CHAINE DANS UNE AUTRE par stealon

GOOGLE MAP PB ZINDEX MARKER par philou8

RE : AIDE SUR UN SCRIPT?? par NHenry

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

URGENT - Realisation d-un flux standard XML -NewsML- CAHIER DES CHARGES DISPONIBLE
Budget : 400€
Creation de newsletter sur une page Facebook
Budget : 400€
fichier d-export de site OS commerce ver plateforme logistique-CDC disponible
Budget : 1 200€

Logiciels

DocTranslate (V3.1.0.0)
DOCTRANSLATE (V3.1.0.0)

DocTranslate est un traducteur de document Microsoft Word, PowerPoint et Excel. Il permet d'autom...

Cliquez pour télécharger DocTranslate
Tribler (2012)
TRIBLER (2012)

Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des...

Cliquez pour télécharger Tribler
OneSwarm (2012)
ONESWARM (2012)

Le peer-to-peer qui protège votre vie privée, c'est OneSwarm. Ce logiciel de peer-to-peer crypté...

Cliquez pour télécharger OneSwarm
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System