J-F Portala a écrit :
> Bonjour
> je travaille avec wamp

Wikipedia me dit que ce n'est qu'un package :
Apache + PHP + MySql
.... un serveur Web à la maison quoi.

> J'affiche une table article dans un tableau.
> Chaque ligne correspond à la description de l'article et en fin de ligne ,
> j'ai mis un lien "modifier" qui permet d'ouvrir une boite de
> dialogue permettant de modifier l'article.

Plus de précision ?
Qu'est-ce que c'est que cette boite de dialogue ?
(qu'il y a t-il dedans, comment sait-elle qu'on veut modifier l'article
et non pas son prix ou la quantité ? comment et où renvoie-t'elle la
modif ?)

> Lorsque je valide ce formulaire, je rafraichis mon tableau avec les
> nouvelles informations.
>
> Le probleme est que lorsque j'ai plusieurs centaines d'articles, lorsque je
> réaffiche la page avec le tableau,
> j'ai perdu la position de la ligne que je venais de modifier, ce qui fait
> que si je veux modifier l'article juste au dessus ou en dessous
> pour modifier un prix par exemple, je dois à nouveau chercher dans tout le
> tableau.

Ben ! Aussi ! c't'idée de valider alors que c'est pas fini !
Frénétique de la touche Entrée ?


> Je peux mettre en évidence le dernier article modifié en mettant la ligne
> d'une autre couleur, mais il faut quand
> meme faire du scrolling pour le rechercher.
>
> Je sais que le top serait de modifier directement dans le tableau
> d'affichage sans passer par le formulaire, mais cela me parait
> depasser mes compétences.

Le top, puisque tu sembles en gestion d'un futur formulaire de commande,
serait de tout mettre dans un vrai formulaire avec réf, descriptif, prix
dans des champs de formulaires qui sont alors directement modifiables.

Pour la modif d'affichage :

function ecrire(rang, cel, texte) { // cel = N° de cellule de la rangée
rang = rang.parentNode;
while(rang.tagName!='TD') rang = rang.parentNode;
rang.cells[cel-1].innerHTML = texte;
}

<button onclick="ecrire(this, 2, 'Paire de chaussettes')">



Alors ... par l'exemple :

CSS :

..hide { visibility: hidden; height: 0px; overflow: hidden; z-index: 0; }
td { position: relative }
td div { position: absolute; top: 0; border:1px solid; z-index: 100; }

HTML :

<form action="articles.php" name="f_art">
<table id="articles">
<tr><th>Ref</th>Desrc.</th><th>Px</th><th>Quant</th><th>Total</th><th>Modif</th></tr>
<tr><td><?php echo $Numero[] ?></td><td><?php echo $Descro[] ?></td> ...
<tr><td> ...
... ... ... </tr>
</table>
<input type=submit>
</form>

dernière cellule de 125ième rangée :
(le php devra écrire '125' partout où c'est nécessaire)

<td class="modif">
<button onclick="modifier(125)">modifier</button>
<div class="hide" id="modif_125">
<p>Article N° : <input name="Num_125" value="125"> -
Prix : <input name="Prx_125" value="31.25">€
<input name="Mem_125" type=hidden>
<p>Descriptif : <textarea name="Txt_125">
Apprendre le JavaScript, mais c'est facile.
</textarea>
<input type=button onclick="return modif(125)"
value="valider la modification">
<input type=button onclick="return annule(125)"
value="annuler la modification">
</div>
</td>

JS :

<script type="text/javascript">
function $(id) { return document.getElementById(id); }

function modifier(num) { $('modif_'+num).className = ''; }

function modif(num) {
var rang = $('articles).rows[num].getElementsByTagName('TD');
var F = document.forms['f_art'].elements;
// sauvegarde des originaux
F['Mem_'+num].value = F['Num_'+num].value + '|' +
F['Txt_'+num].value + '|' +
F['Prx_'+num].value;
// ecriture des modifs
rang[0].innerHTML = F['Num_'+num].value;
rang[1].innerHTML = F['Txt_'+num].value;
rang[2].innerHTML = F['Prx_'+num].value;
$('modif_'+num).className = 'hide';
return false;
}

function annule(num) {
var rang = $('articles).rows[num].getElementsByTagName('TD');
var F = document.forms['f_art'].elements;
// récupération des originaux
var Mem = F['Mem_'+num].value.split('|');
// ecriture des modifs
rang[0].innerHTML = F['Num_'+num].value = Mem[0];
rang[1].innerHTML = F['Txt_'+num].value = Mem[1];
rang[2].innerHTML = F['Prx_'+num].value = Mem[2];
$('modif_'+num).className = 'hide';
return false;
}
</script>


et pour vraiment confirmer tout d'un coup
le boutton de submit est après le table

Le PHP n'aura qu'à redistribuer à la BdD les données qui sont dans les
champs des divs de modification

Bon, après on peut compliquer avec une double validation :
- réaffichage via PHP pour être sûr que tout est OK
- validation pour enregistrement


> Auriez vous des pistes ?

Sinon, par méthode "fébrile", mettre dans le head :

<?php
# script php pour récupérer 'num'
$num = $POST[ ... ; // ou je ne sais quoi kivabien en php
?>
<script type="text/javascript">
var num ='<?php echo $num ?>';
function repere(val) { document.form.num.value = val;}
function init() {
if(num != '') {
num = document.forms['f_art'].elements['Num_'+num];
num.focus();
setTimeout(function(){num.blur();},200);
}
}
window.onload = init;
</script>

et mettre qque part dans le form :

<input type=hidden name="num" value="">

puis dans les boutons de submit de chaque rangée :

(exemple rangée N°125)
<input type=submit onclick="repere(125);">

Soit en PHP qque chose comme :

<input type=submit onclick="repere(<?php echo $Numero[] ?>);">



Le PHP, au retour du formulaire, devra avoir récupéré la variable
attachée 'num' et la ré-écrire oussavabien dans le JS du head.

--
sm