Ordonnancement des lignes d'un tableau problème

Le
stefen76
Bonjour,

Je rencontre un problme avec le code ci-dessous qui me permet
d'ajouter des lignes dans un tableau html, de les rordonnancer et de
les supprimer

L'ajout fonctionne correctement, mais le reste dconne un peu.

- Quand je supprime une ligne il me vide toutes les donnes des autres
lignes.
- Quand je rordonne, il me dcale les champs et ne me reprends pas le
contenu de ma liste droulante.

Voila le code :
==
==
==
<head>
</head>
<body>
<form name="form_content" method="post" action="majcmp.php">
<fieldset>
<legend>Liste des composants</legend>
<p>Slectionner 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 ajouts</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 ajouts</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);
// rcupration de l'index de la ligne insre, 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 premire 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 mme manire, les identifiants des objets img gnrs
contiennent le rowIndex(+1) de la ligne insre
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 mme manire, les identifiants des objets img gnrs
contiennent le rowIndex(+1) de la ligne insre
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 zro)
correspond la ligne sur laquelle on a cliqu
// comme au niveau affichage on a nos lignes numrotes 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 premire cellule on remet niveau le texte affich et
les identifiants des objets input
// sans oublier de rcuprer 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 dplacer une ligne le paramtre idx contient le
numro de la ligne sur laquelle on a cliqu (numrotation en partant
de 1)
function move(nTable,idx,sens) {
var ta = getel(nTable);
// rcupration 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;
// rcupration dans une variable du contenu de la ligne qui va tre=

"dplace"
var tr = trs[idxA].innerHTML;
// rcupration 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 dplacement
var idxB = idxA + sens;
// on dtermine si on se trouve sur la premire ou dernire ligne,
de manire ne pas permettre le dplacement 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 numrotation affiche 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 premire cellule on remet niveau le texte affich
et les identifiants des objets input
// sans oublier de rcuprer 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 ide Merci pour l'aide.

Stfen
www.splashcommerce.com
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