intervertir lignes tableau ?

27 nov. 2006, 21:40

J'ai un nouveau problème, j'espère que vous pourrez m'aider
sur celui-ci.

Quand on insère des lignes à un tableau avec la méthode insertRow
et insertCell, ces lignes sont indexées automatiquement par l'objet
DOM.

De cette manière :

Code : Tout sélectionner

<table id="tab">
</table>
<script language="javascript">
var tab=document.getElementById("tab");
tableau.insertRow(0);
tableau.insertRow(1);
tableau.insertRow(1);
</script>

Dans cet exemple, j'ai inséré une ligne au niveau 0, puis une
ligne au niveau 1, la troisième ligne au niveau 1 à ensuite
poussé la deuxième ligne au niveau 2. Je me retrouve donc
avec un tableau comme ceci.

ligne 0 -> valeur 1;
ligne 1 -> valeur 3;
ligne 2 -> valeur 2;

Vous avez compris le mécanisme ? où peut être le connaissez-vous
déjà ?

Moi, ce que je souhaite faire, c'est pouvoir intervertir les lignes
0 et 2 sans passer par insertROW et insertCELL. Je ne veux
pas supprimer de ligne, les garder en variables temporaires ...
Car je ne connais pas à l'avance le nombre de colonnes et les
contenus. Je souhaite vraiment pouvoir echanger les index du
tableau et afficher le nouvel ordre sans raffraichissement de
la page . Est ce possible ???

Merci à vous

28 nov. 2006, 12:46

Y a peut être mieux, mais pourquoi ne pas utiliser les objets rows[] et cells[] pour lire le contenu des différentes cellules d'une ligne, les écraser par celui de ton autre ligne et enfin coller les données lues dans cette dernière ?

28 nov. 2006, 12:57

Je suis en train de m'orienter sur les nodes. Mais j'ai beaucoup
de mal.

J'essai pour l'instant simplement d'insérer une ligne à mon tableau
nommé "tb" mais cela ne marche pas.

Voici le code :

Code : Tout sélectionner

<head>
<script language="javascript">
var tableau=null;
function Selecttab(val)
{
	tableau=document.getElementById(val);
	
}
function ajoutLigne()
{
  if (!tableau.parentNode){tableau = tableau.parentNode;}

  //on doit ajouter une ligne TR
  var tr1 = document.createElement("tr");
  
  var td1 = document.createElement("td");
  var td2 = document.createElement("td");
  var td3 = document.createElement("td");
  var td4 = document.createElement("td");
  td1.appendChild(document.createTextNode(" td1 "));
  td2.appendChild(document.createTextNode(" td2 "));
  td3.appendChild(document.createTextNode(" td3 "));
  td4.appendChild(document.createTextNode(" td4 "));
  tr1.appendChild(td1);
  tr1.appendChild(td2);
  tr1.appendChild(td3);
  tr1.appendChild(td4);
  //ajout de la ligne
  
  tableau.appendChild(tr1);
}
</script>
</head>

<body>

<table id="tb">
  <tr>  <td>t1</td><td>t2</td><td>t3</td><td>t4</td>  </tr>
</table>

<script type="text/javascript">

Selecttab("tb");
ajoutLigne();
</script>
</body>
</html>

ça n'ajoute aucune ligne et ça retourne aucune erreur ???

28 nov. 2006, 14:31

J'ai réécris ton programme :

Code : Tout sélectionner

<head> 
<script language="javascript">  
function ajoutLigne(val) 
{ 
   //Tableau de travail
   var tableau = document.getElementById(val);
   
   //Noeud principal
   tableau = tableau.parentNode;
  //Créer une ligne TR 
  var tr1 = document.createElement("tr"); 
  //Créer des céllules
  var td1 = document.createElement("td"); 
  var td2 = document.createElement("td"); 
  var td3 = document.createElement("td"); 
  var td4 = document.createElement("td");
  //Remplir les céllules
  td1.appendChild(document.createTextNode(" td1 ")); 
  td2.appendChild(document.createTextNode(" td2 ")); 
  td3.appendChild(document.createTextNode(" td3 ")); 
  td4.appendChild(document.createTextNode(" td4 "));
  //Ajouter le céllule à la ligne crée
  tr1.appendChild(td1); 
  tr1.appendChild(td2); 
  tr1.appendChild(td3); 
  tr1.appendChild(td4); 
  //Ajouter la ligne au tableau de travail
  tableau.appendChild(tr1); 
} 
</script> 
</head> 

<body> 
<table id="tb" border=1>
</table> 
<p><input type="button" value="Ajouter une ligne" onClick="ajoutLigne('tb');"> </p>
</body> 
</html>

Ou bien :

Code : Tout sélectionner

<head> 
<script language="javascript">  
function Selecttab(id_tableau){
	if (document.getElementById(id_tableau)) return document.getElementById(id_tableau);
	else return null;
}
 
function ajoutLigne(id_tableau) 
{ 
  //Tableau de travail
  var tableau = Selecttab(id_tableau);
  if (tableau==null) return null;
  
  //Noeud principal
  var racine_tableau = tableau.parentNode;
  //Créer une ligne TR 
  var tr1 = document.createElement("tr"); 
  //Créer des céllules
  var td1 = document.createElement("td"); 
  var td2 = document.createElement("td"); 
  var td3 = document.createElement("td"); 
  var td4 = document.createElement("td");
  //Remplir les céllules
  td1.appendChild(document.createTextNode(" td1 ")); 
  td2.appendChild(document.createTextNode(" td2 ")); 
  td3.appendChild(document.createTextNode(" td3 ")); 
  td4.appendChild(document.createTextNode(" td4 "));
  //Ajouter le céllule à la ligne crée
  tr1.appendChild(td1); 
  tr1.appendChild(td2); 
  tr1.appendChild(td3); 
  tr1.appendChild(td4); 
  //Ajouter la ligne au racine_tableau de travail
  racine_tableau.appendChild(tr1); 
} 
</script> 
</head> 

<body> 
<table id="tb" border=1>
</table> 
<p><input type="button" value="Ajouter une ligne" onClick="ajoutLigne('tb');"> </p>
</body> 
</html>

29 nov. 2006, 16:39

Salut, merci d'avoir reécris mon programme, mais je sais d'avance
qu'il ne marchera pas.

Je me suis pas mal documenté et j'ai appris que sur internet explorer
il fallait une balise nommé <tbody> à l'intérieur du tableau pour
que ça fonctionne. J'ai vérifié, en effet ça venait de là.

<table>
<tbody>
<tr>...
</tr>
<tr>...
</tr>
</tbody>
</table>

document.getElementByid("tab").tBodies.appendChild().......

Merci

29 nov. 2006, 18:20

Oui mais moi je n'écris plus pour IE

intervertir lignes tableau ?

Qui est en ligne