Je rencontre un probl=E8me avec le code ci-dessous qui me permet
d'ajouter des lignes dans un tableau html, de les r=E9ordonnancer et de
les supprimer...
L'ajout fonctionne correctement, mais le reste d=E9conne un peu.
- Quand je supprime une ligne il me vide toutes les donn=E9es des autres
lignes.
- Quand je r=E9ordonne, il me d=E9cale les champs et ne me reprends pas le
contenu de ma liste d=E9roulante.
Voila le code :
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D
<head>
</head>
<body>
<form name=3D"form_content" method=3D"post" action=3D"majcmp.php">
<fieldset>
<legend>Liste des composants</legend>
<p>S=E9lectionner un composant dans la liste et donner lui un titre</
p>
<input type=3D"hidden" id=3D"cmp_nb_val" name=3D"cmp_nb_val" value=3D"2">
<table cellpadding=3D"0" cellspacing=3D"0" border=3D"0" id=3D"table0"
class=3D"width:100%">
<tbody>
<tr id=3D"tr1">
<td id=3D"tdL1">
<select id=3D"home_box_cmp_1" name=3D"home_box_cmp_1"
class=3D"frm_input" style=3D"width:200px;">
<option value=3D"blank"></option>
<option value=3D"17" selected>Home Actualite</option>
<option value=3D"52">Lettre d'information</option>
<option value=3D"87">Ecommerce Derniers articles ajout=E9s</option>
<option value=3D"93">Connexion espace client</option>
</select>
</td>
<td id=3D"tdL1"><input name=3D"home_box_cmp_titre_1"
id=3D"home_box_cmp_titre_1" type=3D"text" value=3D"Acutalit=E9" size=3D"40"
maxlength=3D"50"/></td>
<td id=3D"tdL1">
<img id=3D"bt_cancel.png1" src=3D"images/bt_cancel.png"
onclick=3D"delRow('table0',1);">
<img id=3D"btn_up1" src=3D"images/bt_fleche_haut.png"
onclick=3D"move('table0',1,-1);">
</form>
<script>
// fonction getelement
function getel(elm) {
return document.getElementById(elm);
}
// fonction d'ajout d'une ligne
function addRow(nTable) {
var ta =3D getel(nTable);
// insertion de la ligne en fin de tableau
var myRow =3D ta.insertRow(-1);
// r=E9cup=E9ration de l'index de la ligne ins=E9r=E9e, et on ajoute 1 car=
on souhaite un tableau allant de la ligne 1 =E0 n
var idx =3D myRow.rowIndex + 1;
// insertion d'une cellule sur la ligne
var myCell =3D myRow.insertCell(-1);
// remplissage de la premi=E8re cellule avec le texte et les input
myCell.innerHTML =3D '<select id=3D"home_box_cmp_'+ idx +'"
name=3D"home_box_cmp_'+ idx +'" size=3D"1" class=3D"frm_input" style=3D"widt=
h:
200px;"><?php echo cmp_liste_select_option();?></select>';
// insertion d'une seconde cellule sur la ligne
myCell =3D myRow.insertCell(-1);
// de la m=EAme mani=E8re, les identifiants des objets img g=E9n=E9r=E9s
contiennent le rowIndex(+1) de la ligne ins=E9r=E9e
myCell.innerHTML =3D '<input type=3D"texte" name=3D"home_box_cmp_titre_'+
idx +'" id=3D"home_box_cmp_titre_'+ idx +'" size=3D"40" maxlength=3D"50"
value=3D""/>';
myCell =3D myRow.insertCell(-1);
// de la m=EAme mani=E8re, les identifiants des objets img g=E9n=E9r=E9s
contiennent le rowIndex(+1) de la ligne ins=E9r=E9e
myCell.innerHTML =3D '<img id=3D"bt_cancel.png' + idx + '" src=3D"<?php
echo APP_HTML_URL; ?>/images/bt_cancel.png"
onclick=3D"delRow(\'table0\',' + idx + ');"> <img id=3D"btn_up' + idx + '"
src=3D"<?php echo APP_HTML_URL; ?>/images/bt_fleche_haut.png"
onclick=3D"move(\'table0\',' + idx + ',-1);"> <img id=3D"btn_down' + idx +
'" src=3D"<?php echo APP_HTML_URL; ?>/images/bt_fleche_bas.png"
onclick=3D"move(\'table0\',' + idx + ',1);">';
getel('cmp_nb_val').value++;
}
// fonction de supression d'une ligne
function delRow(nTable,idx) {
var ta =3D getel(nTable);
// suppression de la ligne
// on souhaite supprimer la ligne dont l'index (partant de z=E9ro)
correspond =E0 la ligne sur laquelle on a cliqu=E9
// comme au niveau affichage on a nos lignes num=E9rot=E9es de 1 =E0 n, on=
retranche 1
ta.deleteRow(idx-1);
// boucle sur toutes les lignes du tableau en partant de 1
for (i=3D0;i<ta.tBodies[0].rows.length;i++) {
var j =3D i + 1;
// on remet =E0 niveau l'identifiant de la ligne et des cellules
avec l'index de la boucle
ta.tBodies[0].rows[i].id=3D'tr' + j;
ta.tBodies[0].rows[i].cells[0].id=3D'td' + j;
ta.tBodies[0].rows[i].cells[1].id=3D'tdL' + j;
// dans la premi=E8re cellule on remet =E0 niveau le texte affich=E9 et
les identifiants des objets input
// sans oublier de r=E9cup=E9rer les informations qui auraient pu =EAtre=
// dans la seconde cellule, on remet =E0 niveau les identifiants des
objets img
ta.tBodies[0].rows[i].cells[2].innerHTML =3D '<img
id=3D"bt_cancel.png' + j + '" src=3D"<?php echo APP_HTML_URL; ?>/images/
bt_cancel.png" onclick=3D"delRow(\'table0\',' + j + ');"> <img
id=3D"btn_up' + j + '" src=3D"<?php echo APP_HTML_URL; ?>/images/
bt_fleche_haut.png" onclick=3D"move(\'table0\',' + j + ',-1);"> <img
id=3D"btn_down' + j + '" src=3D"<?php echo APP_HTML_URL; ?>/images/
bt_fleche_bas.png" onclick=3D"move(\'table0\',' + j + ',1);">';
}
getel('cmp_nb_val').value--;
}
// fonction pour d=E9placer une ligne le param=E8tre idx contient le
num=E9ro de la ligne sur laquelle on a cliqu=E9 (num=E9rotation en partant
de 1)
function move(nTable,idx,sens) {
var ta =3D getel(nTable);
// r=E9cup=E9ration de toutes les lignes du tableau dans un array
var trs =3D ta.tBodies[0].getElementsByTagName('tr');
// positionnement de l'index de la ligne sur laquelle on a cliqu=E9
var idxA =3D idx - 1;
// r=E9cup=E9ration dans une variable du contenu de la ligne qui va =EAtre=
"d=E9plac=E9e"
var tr =3D trs[idxA].innerHTML;
// r=E9cup=E9ration des valeurs saisies dans les input
var ins =3D trs[idxA].getElementsByTagName('input');
var insselect =3D trs[idxA].getElementsByTagName('select');
// positionnement de l'index de la ligne cible pour le d=E9placement
var idxB =3D idxA + sens;
// on d=E9termine si on se trouve sur la premi=E8re ou derni=E8re ligne,
de mani=E8re =E0 ne pas permettre le d=E9placement en dehors du tableau
var dontmove =3D 0;
if (idx=3D=3D1) {
if (sens=3D=3D-1) dontmove++;
}
if (idx=3D=3Dgetel('cmp_nb_val').value) {
if (sens=3D=3D1) dontmove++;
}
if (dontmove=3D=3D0) {
// suppression de la ligne
ta.deleteRow(idxA);
// insertion d'une nouvelle ligne =E0 l'index
ta.insertRow(idxB);
// remplissage de la ligne
trs[idxB].innerHTML =3D tr;
// on repositionne les valeurs =E9ventuellement saisies dans les
input
trs[idxB].getElementsByTagName('select')[0].value =3D
insselect[0].value;
trs[idxB].getElementsByTagName('input')[1].value =3D ins[0].value;
// boucle sur toutes les lignes du tableau avec petite
transposition pour la num=E9rotation affich=E9e des lignes
for (i=3D0;i<ta.tBodies[0].rows.length;i++) {
var j =3D i + 1;
// on remet =E0 niveau l'identifiant de la ligne et des cellules
avec l'index de la boucle +1
ta.tBodies[0].rows[i].id=3D'tr' + j;
ta.tBodies[0].rows[i].cells[0].id=3D'td' + j;
ta.tBodies[0].rows[i].cells[1].id=3D'tdL' + j;
// dans la premi=E8re cellule on remet =E0 niveau le texte affich=E9
et les identifiants des objets input
// sans oublier de r=E9cup=E9rer les informations qui auraient pu
=EAtre saisies dans les input
var ins =3D
ta.tBodies[0].rows[i].cells[0].getElementsByTagName('input');
ta.tBodies[0].rows[i].cells[0].innerHTML =3D '<select
id=3D"home_box_cmp_'+ j +'" name=3D"home_box_cmp_'+ j +'" size=3D"1"
class=3D"frm_input" style=3D"width:200px;"><?php echo
cmp_liste_select_option();?></select>';
ta.tBodies[0].rows[i].cells[1].innerHTML =3D '<input type=3D"texte"
id=3D"home_box_cmp_titre_'+ j +'" name=3D"home_box_cmp_titre_'+ j +'"
size=3D"40" maxlength=3D"50" value=3D"' + ins[0].value + '"/>';
ta.tBodies[0].rows[i].cells[2].innerHTML =3D '<img
id=3D"bt_cancel.png' + j + '" src=3D"<?php echo APP_HTML_URL; ?>/images/
bt_cancel.png" onclick=3D"delRow(\'table0\',' + j + ');"> <img
id=3D"btn_up' + j + '" src=3D"<?php echo APP_HTML_URL; ?>/images/
bt_fleche_haut.png" onclick=3D"move(\'table0\',' + j + ',-1);"> <img
id=3D"btn_down' + j + '" src=3D"<?php echo APP_HTML_URL; ?>/images/
bt_fleche_bas.png" onclick=3D"move(\'table0\',' + j + ',1);">';
}
}
}
</script>
</body>
</html>
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D
Si l'un d'entre vous =E0 une id=E9e... Merci pour l'aide.
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.
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.
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...
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.
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.
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.
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
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)
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)
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)
