11548 sujets

JavaScript, DOM et API Web HTML5

Modifier l'ordre des lignes d'un tableau en javascript

Bonjour à tous,

Je souhaite réaliser un petit formulaire sous forme d'un tableau avec différentes lignes. Sur chaque ligne, j'ai une image avec une flèche montante ou descendante, ainsi qu'un input contenant une valeur (qui correspond à un classement).

Au clic sur l'une des images, je dois inverser l'ordre des lignes et changer la valeur de l'input.

J'ai fait un premier script, mais il bugue sur Firefox à cause du nextsibling : celui-ci récupère les sauts de ligne et espaces...

Je n'arrive pas à corriger mon script.. Si quelqu'un pouvait m'aider.

Ce qui est fait : changer l'ordre des lignes, récupérer la valeur de l'input que l'on change de place.

A faire : récupérer la valeur de l'input qui est modifié par le mouvement.

Je l'ai fait pour le moment pour le clic sur l'image montante, mais une fois que j'aurais réussi à faire marcher celui-ci le second sera facile à faire.

Voivi mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<script  type="text/javascript">
function changeClassement(ordre,clickedObject) {

	//On récupère le tr qui contient la ligne que l'on veut déplacer
	var element = clickedObject.parentNode;

	while (element && element.nodeName != 'TR') element = element.parentNode;

	//On récupère le parent de la ligne que l'on veut déplacer
	var parent = element.parentNode;
	while (parent && parent.nodeName != 'TBODY') parent = parent.parentNode;

	//On récupère la ligne précedente et suivante de la ligne que l'on veut déplacer
	var frerePrec = element.previousSibling; //récupère le frère précédent de la ligne
	var frereSuiv = element.nextSibling; //récupère le frère suivant

	//On teste si on monte ou si on descend et on agit ...
	if (ordre == 'up') {


		//On récupère la value de l'élement
		var tdElement = clickedObject.parentNode;
		var enfantsElement = tdElement.childNodes;
		for (i=0;i<tdElement.childNodes.length;i++) {
			if (tdElement.childNodes[i].nodeName == 'INPUT') {
				var valueElement = tdElement.childNodes[i].value;
				window.alert(valueElement);
				var DOM_Node_1 = tdElement.childNodes[i];
			}
		}

		var i = 0;
			
		var secondTd = frereSuiv.firstChild;
		
		while (secondTd && secondTd.nodeName != 'TD') {
			secondTd = secondTd.firstChild;
		}
		
		for (i=0;i<secondTd.childNodes.length;i++) {
			if (secondTd.childNodes[i].nodeName == 'INPUT') {
				var valueFrere = secondTd.childNodes[i].value;
				window.alert(valueFrere);
				var DOM_Node_2 = secondTd.childNodes[i];
			}
		}

		//On permute les valeurs des noeuds d'input...

		DOM_Node_1.value = valueFrere;
		DOM_Node_2.value = valueElement;

		//On change l'ordre des lignes
		parent.insertBefore(element,frerePrec);

	} else {
		parent.insertBefore(frereSuiv,element);
	}
}
</script>
</head>

<table>
<tbody id="tableau">
	<tr id="ligne1">
		<td>ligne 1</td>
		<td><input type="hidden" value="1" name="tx_espectacle[15]" />
		    <img src="button_up.gif" alt="Monter" title="Monter" onclick="changeClassement('up',this);">
			<img src="button_down.gif" alt="Descendre" title="Descendre" onclick="changeClassement('down',this);">
		</td>
	</tr>
	<tr id="ligne2">
		<td>ligne 2</td>
		<td><input type="hidden" value="2" name="tx_espectacle[12]" />
		    <img src="button_up.gif" alt="Monter" title="Monter" onclick="changeClassement('up',this);">
			<img src="button_down.gif" alt="Descendre" title="Descendre" onclick="changeClassement('down',this);">
		</td>
	</tr>
	<tr id="ligne3">
		<td>ligne 3</td>
		<td><input type="hidden" value="3" name="tx_espectacle[11]" />
		    <img src="button_up.gif" alt="Monter" title="Monter" onclick="changeClassement('up',this);">
			<img src="button_down.gif" alt="Descendre" title="Descendre" onclick="changeClassement('down',this);">
		</td>
	</tr>
	<tr id="ligne4">
		<td>ligne 4</td>
		<td><input type="hidden" value="4" name="tx_espectacle[16]" />
		    <img src="button_up.gif" alt="Monter" title="Monter" onclick="changeClassement('up',this);">
			<img src="button_down.gif" alt="Descendre" title="Descendre" onclick="changeClassement('down',this);">
		</td>
	</tr>
</tbody>
<body>
</body>
</html>
[/i][/i][/i][/i][/i][/i]
Ce que tu peux faire au lien de passer par previous et nextSibling, c'est te servir de l'ordre des tr, et inverser les deux lignes que tu veux, tu peux récupérer le numéro de ta ligne soit par une boucle qui teste si la ligne courante est bien la ligne que tu dois bougé, ou alors passer le numéro en paramètre à la fonction voir même de faire selon l'id de la ligne (vu que tes lignes se nomment ligne1, ligne2 etc..., il suffit donc de supprimer les 5 premiers caractères pour récupérer le numéro de la ligne)
var toutes_tr = getElementsByTagName('tr') ;
//On récupère le tr qui contient la ligne que l'on veut déplacer
  	var element = clickedObject.parentNode;

	while (element && element.nodeName != 'TR') element = element.parentNode;
// On récupère le numéro de cette ligne
var line_number = element.id.substr(5,element.id.length-5) - 1 ;
	//On récupère le parent de la ligne que l'on veut déplacer
	var parent = element.parentNode;
       while (parent && parent.nodeName != 'TBODY') parent = parent.parentNode;
//On récupère la ligne précedente et suivante de la ligne que l'on veut déplacer
	var frerePrec = toutes_tr[line_number-1]; //récupère le frère précédent de la ligne
	var frereSuiv = toutes_tr[line_number+1]; //récupère le frère suivant
 etc...
Merci beaucoup pour ta réponse très bien expliquée Smiley smile .

Seulement, j'ai un petit souci, c'est que tu utilises le numéro de la ligne en utilisant le nom de la ligne... Hors dans son utilisation, ce tableau affichera des entrées d'une base de données, et l'intitulé 'ligne' sera remplacé par le nom de l'enregistrement qui sont des prénoms & noms...

Mais ta piste me semble bien, je vais essayer de partir dans ce sens là en adaptant le tout, je reviendrais poster le code qui fonctionne si je trouve Smiley smile .

Merci bien !
Sujet clos
Aller à