Ordonnancement des lignes d'un tableau problème

Le
stefen76
Bonjour,

Je rencontre un problème avec le code ci-dessous qui me permet
d'ajouter des lignes dans un tableau html, de les réordonnancer et de
les supprimer

L'ajout fonctionne correctement, mais le reste déconne un peu.

- Quand je supprime une ligne il me vide toutes les données des autres
lignes.
- Quand je réordonne, il me décale les champs et ne me reprends pas le
contenu de ma liste déroulante.

Voila le code :
==
==
==
<head>
</head>
<body>
<form name="form_content" method="post" action="majcmp.php">
<fieldset>
<legend>Liste des composants</legend>
<p>Sélectionner un composant dans la liste et donner lui un titre</
p>
<input type="hidden" id="cmp_nb_val" name="cmp_nb_val" value="2">
<table cellpadding="0" cellspacing="0" border="0" id="table0"
class="width:100%">
<tbody>
<tr id="tr1">
<td id="tdL1">
<select id="home_box_cmp_1" name="home_box_cmp_1"
class="frm_input" style="width:200px;">
<option value="blank"></option>
<option value="17" selected>Home Actualite</option>
<option value="52">Lettre d'information</option>
<option value="87">Ecommerce Derniers articles ajoutés</option>
<option value="93">Connexion espace client</option>
</select>
</td>
<td id="tdL1"><input name="home_box_cmp_titre_1"
id="home_box_cmp_titre_1" type="text" value="Acutalité" size="40"
maxlength="50"/></td>
<td id="tdL1">
<img id="bt_cancel.png1" src="images/bt_cancel.png"
onclick="delRow('table0',1);">
<img id="btn_up1" src="images/bt_fleche_haut.png"
onclick="move('table0',1,-1);">

<img id="btn_down1" src="images/bt_fleche_bas.png"
onclick="move('table0',1,1);">
</td>
</tr>
<tr id="tr2">
<td id="tdL2">
<select id="home_box_cmp_2" name="home_box_cmp_2"
class="frm_input" style="width:200px;">
<option value="blank"></option>
<option value="17" selected>Home Actualite</option>
<option value="52">Lettre d'information</option>
<option value="87">Ecommerce Derniers articles ajoutés</option>
<option value="93">Connexion espace client</option>
</select>
</td>
<td id="tdL2"><input name="home_box_cmp_titre_2"
id="home_box_cmp_titre_2" type="text" value="lettre infos" size="40"=

maxlength="50"/></td>
<td id="tdL2">
<img id="bt_cancel.png2" src="images/bt_cancel.png"
onclick="delRow('table0',2);">
<img id="btn_up2" src="images/bt_fleche_haut.png"
onclick="move('table0',2,-1);">
<img id="btn_down2" src="images/bt_fleche_bas.png"
onclick="move('table0',2,1);">
</td>
</tr>
</tbody>
</table>
<p><input type="button" value="Ajouter un composant"
onclick="addRow('table0');"></p>
</fieldset>
<p>
&nbsp;<br/>
<input type="submit" class="input_button" name="Enregistrer"
value="Enregistrer"/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" name="annuler" value="Annuler"
onclick="javascript:window.close();" class="input_button" />
</p>

</form>
<script>
// fonction getelement
function getel(elm) {
return document.getElementById(elm);
}

// 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
myCell.innerHTML = '<select id="home_box_cmp_'+ idx +'"
name="home_box_cmp_'+ idx +'" size="1" class="frm_input" style="widt=
h:
200px;"><?php echo cmp_liste_select_option();?></select>';
// insertion d'une seconde cellule sur la ligne
myCell = myRow.insertCell(-1);
// 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 = '<input type="texte" name="home_box_cmp_titre_'+
idx +'" id="home_box_cmp_titre_'+ idx +'" size="40" maxlength="50"
value=""/>';
myCell = myRow.insertCell(-1);
// 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="bt_cancel.png' + idx + '" src="<?php
echo APP_HTML_URL; ?>/images/bt_cancel.png"
onclick="delRow('table0',' + idx + ');"> <img id="btn_up' + idx + '"
src="<?php echo APP_HTML_URL; ?>/images/bt_fleche_haut.png"
onclick="move('table0',' + idx + ',-1);"> <img id="btn_down' + idx +
'" src="<?php echo APP_HTML_URL; ?>/images/bt_fleche_bas.png"
onclick="move('table0',' + idx + ',1);">';
getel('cmp_nb_val').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 ins1 =
ta.tBodies[0].rows[i].cells[0].getElementsByTagName('select');
var ins =
ta.tBodies[0].rows[i].cells[1].getElementsByTagName('input');
ta.tBodies[0].rows[i].cells[0].innerHTML = '<select
id="home_box_cmp_'+ j +'" name="home_box_cmp_'+ j +'" size="1"
class="frm_input" style="width:200px;"><?php echo
cmp_liste_select_option();?></select>';
//'<input type="texte" name="home_box_cmp_titre_'+ j +'" size="50"
maxlength="50" value=""/>';
ta.tBodies[0].rows[i].cells[1].innerHTML = '<input type="texte"
id="home_box_cmp_titre_'+ j +'" name="home_box_cmp_titre_'+ j +'"
size="40" maxlength="50" value="' + ins[1].value + '"/>';
// <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[2].innerHTML = '<img
id="bt_cancel.png' + j + '" src="<?php echo APP_HTML_URL; ?>/images/
bt_cancel.png" onclick="delRow('table0',' + j + ');"> <img
id="btn_up' + j + '" src="<?php echo APP_HTML_URL; ?>/images/
bt_fleche_haut.png" onclick="move('table0',' + j + ',-1);"> <img
id="btn_down' + j + '" src="<?php echo APP_HTML_URL; ?>/images/
bt_fleche_bas.png" onclick="move('table0',' + j + ',1);">';
}
getel('cmp_nb_val').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');
var insselect = trs[idxA].getElementsByTagName('select');
// 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('cmp_nb_val').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('select')[0].value =
insselect[0].value;
trs[idxB].getElementsByTagName('input')[1].value = ins[0].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 = '<select
id="home_box_cmp_'+ j +'" name="home_box_cmp_'+ j +'" size="1"
class="frm_input" style="width:200px;"><?php echo
cmp_liste_select_option();?></select>';
ta.tBodies[0].rows[i].cells[1].innerHTML = '<input type="texte"
id="home_box_cmp_titre_'+ j +'" name="home_box_cmp_titre_'+ j +'"
size="40" maxlength="50" value="' + ins[0].value + '"/>';
ta.tBodies[0].rows[i].cells[2].innerHTML = '<img
id="bt_cancel.png' + j + '" src="<?php echo APP_HTML_URL; ?>/images/
bt_cancel.png" onclick="delRow('table0',' + j + ');"> <img
id="btn_up' + j + '" src="<?php echo APP_HTML_URL; ?>/images/
bt_fleche_haut.png" onclick="move('table0',' + j + ',-1);"> <img
id="btn_down' + j + '" src="<?php echo APP_HTML_URL; ?>/images/
bt_fleche_bas.png" onclick="move('table0',' + j + ',1);">';
}
}
}
</script>
</body>
</html>
==
==
==
Si l'un d'entre vous à une idée Merci pour l'aide.

Stéfen
www.splashcommerce.com
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Olivier Miakinen
Le #2706901
Bonjour,


Je rencontre un problème avec le code ci-dessous qui me permet
d'ajouter des lignes dans un tableau html, de les réordonnancer et de
les supprimer...

[...]

myCell.innerHTML = '<select id="home_box_cmp_'+ idx +'"
name="home_box_cmp_'+ idx +'" size="1" class="frm_input" style="width:
200px;"><?php echo cmp_liste_select_option();?></select>';


Utiliser innerHTML pour insérer ou supprimer autre chose que du texte
(et en particulier des balises HTML) donne généralement un résultat plus
qu'aléatoire. Tu ferais mieux d'utiliser les fonctions de manipulation
du DOM.

myCell.innerHTML = '<img id="bt_cancel.png' + idx + '" src="<?php
echo APP_HTML_URL; ?>/images/bt_cancel.png"
onclick="delRow('table0',' + idx + ');"> <img id="btn_up' + idx + '"
src="<?php echo APP_HTML_URL; ?>/images/bt_fleche_haut.png"
onclick="move('table0',' + idx + ',-1);"> <img id="btn_down' + idx +
'" src="<?php echo APP_HTML_URL; ?>/images/bt_fleche_bas.png"
onclick="move('table0',' + idx + ',1);">';


Par ailleurs, pour une question purement JavaScript, tu aurais pu donner
directement le code HTML généré, plutôt que le code source PHP dont le
mélange avec JS obscurcit un peu la compréhension.

SAM
Le #2708261
Bonjour,

Je rencontre un problème avec le code ci-dessous qui me permet
d'ajouter des lignes dans un tableau html, de les réordonnancer et de
les supprimer...


plutôt que de vouloir réinventer la roue, je conseillerais de
googleliser : javascript table sorter

Le principe général :
- on met les données de la table dans un array
- on tripote l'array (pour trier)
- on recrée la table
- par DOM ... mais pose le pb d'incompréhension IE / autre brouteur
ou
- en recréant dans une variable le code html complet du table
- et hop
- DOM : on échange ancienne et nouvelle table
ou
- on innerHTML le conteneur de la table avec la valeur de la variable


innerHTML fonctionne très bien pour un table complet
à proscrire pour une rangée, une cellule
(enfin ... on peut tenter pour modifier le contenu d'une cellule)

L'ajout fonctionne correctement, mais le reste déconne un peu.

- Quand je supprime une ligne il me vide toutes les données des autres
lignes.
- Quand je réordonne, il me décale les champs et ne me reprends pas le
contenu de ma liste déroulante.


Argghh !
parce qu'en plus il y a selects et autre bizarreries dans les cellules ?
(à tous coups c'est du copie-colle par innerHTML que tu fais)

voir :

--
sm

Publicité
Poster une réponse
Anonyme