Re-numéroation de champ après suppression de lignes d'un tableau

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Re-numéroation de champ après suppression de lignes d'un tableau

mc_cut_killer

Bonjour, me revoila avec mes questions javacript :pt1cable:

J'ai déjà posé une question portant sur la création dynamique de tableau.
Maintenant pas de problème avec l'ajout de ligne. Après avoir lu quelque tuto je sais supprimer des lignes.

Par contre pour ce qu'il y est de la création de fonctions js, je suis loin d'être au top
Après avoir supprimé une ligne du tableau, il faut logiquement que je m'occupe de la renumérotation des lignes et des champs.
Je sais faire en php mais pas en javascript.

Voici un exemple de code qui marche pour la suppression de la première ligne, lorsque le tableau comporte deux lignes. Pour que ca marche avec toutes les lignes il faudrais que je fasse une boucle avec des paramètres au lieu de valeurs fixes, et c'est la que je bloque.

Code :

function supprimer_ligne(no_ligne)
{
/* cas ou l'utilisateur supprime la première ligne */
if (no_ligne = 1)
{
document.getElementById('details_cde').deleteRow(1);
document.getElementById('ligne_2').setAttribute("id", 'ligne_1');
document.getElementById('ligne_1').innerHTML = 1;
document.getElementById('qte_2').setAttribute("id", 'qte_1');
document.getElementById('qte_1').setAttribute("readonly", 'readonly');
document.getElementById('lib_2').setAttribute("id", 'lib_1');
document.getElementById('code_produit_2').setAttribute("id", 'code_produit_1');
document.getElementById('delaisJJ_2').setAttribute("id", 'delaisJJ_1');
document.getElementById('delaisMM_2').setAttribute("id", 'delaisMM_1');
document.getElementById('delaisAA_2').setAttribute("id", 'delaisAA_1');
document.getElementById('remise_2').setAttribute("id", 'remise_1');
document.getElementById('remise_1').setAttribute("readonly", 'readonly');
document.getElementById('prix_net_2').setAttribute("id", 'prix_net_1');
document.getElementById('prix_net_1').setAttribute("readonly", 'readonly');
document.getElementById('code_taxe_2').setAttribute("id", 'code_taxe_1');
document.getElementById('montant_ht_2').setAttribute("id", 'montant_ht_1');
nb_ligne --;
}
/* cas ou l'utilisateur supprime la dernière ligne */
else if (no_ligne = nb_ligne)
{
document.getElementById('details_cde').deleteRow(-1);
nb_ligne --;
}
}

Si quelqu'un pouvais me donner un exemple de boucle pour ce cas, je pourais l'appliquer pour la supression d'une ligne intermédiaire en lancant la boucle pour toutes les lignes > à la ligne supprimée.
Pour ce qu'il est est de la dernière ligne pas de problèmes.

Par contre j'ai du me tromper dans la syntaxe de mes if, car ca supprime toujours la première ligne. Et si je met que le code pour la suppression de la dernière ligne ca marche.

Merci d'avance pour votre aide :jap:

Message cité 1 fois
Message édité par mc_cut_killer le 06-04-2006 à 16:15:16

Publicité

mc_cut_killer

Up, personne peut me donner un coup de main !?

Car j'voie pas ou est le problème dans mon if et else if

anapajari

s/travail/glanding on hfr/gs;

mc_cut_killer a écrit :

Par contre pour ce qu'il y est de la création de fonctions js, je suis loin d'être au top
Après avoir supprimé une ligne du tableau, il faut logiquement que je m'occupe de la renumérotation des lignes et des champs.

Autant je comprends l'interet de renuméroter les lignes autant les ids je comprends pas ...

Bon mais sinon en gros ça doit donner quelque chose comme:

Code :

function supprimer_ligne(no_ligne){
// tu récupères le nb de lignes
var nbLignes = document.getElementById('details_cde').getElementsByTagName('tr').length;
// la tu vires la lignes, si j'ai tout compris tu fais:
document.getElementById('ligne_1').innerHTML = 1;
// ensuite tu boucles pour tout ceux qui sont "supérieurs"
for(var i=no_ligne+1; i<nbLignes; i++){
//et tu fais ton bouzin sur les lignes en te servant de i
}
}

Message édité par anapajari le 07-04-2006 à 10:14:00

olivthill

Bonjour,

C'est difficile de répondre, parce que ce morceau de code ne montre pas d'où vient le numéro de ligne, et donc il est difficile de dire pourquoi c'est la première ligne ou la dernière ligne qui est supprimée.

Mais peut-être qu'il s'agit du problème classique, où plusieurs suppressions sont faites à la suite, et où le programmeur ferait l'erreur de penser qu'il faudrait incrémenter le numéro de ligne pour supprimer la ligne suivante, parce qu'il ignorerait que le browser remet à jour les numéros de ligne après chaque suppression, et donc qu'en fait, il ne faut pas incrémenter le numéro de ligne quand on passe à la ligne suivante, car cette ligne suivante a glissé d'un cran et est devenue la ligne précédente par rapport à avant.

mc_cut_killer

En fait j'ai une commande avec le détails. Ce détail est composé de plusieurs lignes avec plusieurs champs.

Au final, j'envoie mon formulaire pour l'enregistrement dans la base de donnée.
Après avoir lu plusieurs tutoriaux sur le sujet, j'ai vu que la plupart utilisait des ids pour récupérer les infos de leurs champs (ce qui n'est pas le plus pratique à ce qu'on m'a dit) mais bon j'ai fait comme ca.
Deplus j'ai des informations qui se change en directe pour xmlhttprequest et la aussi j'utilise les id pour repérer les zones que je dois changer.

Du coup j'ai initialisé une variable nb_ligne que s'incrémente à chaque création de lignes. Donc pour une ligne tous mes champs ont pour id nom_du_champ_[nb_ligne]
Quand je supprime une ligne il faut donc que je remette à jour ces informations. Non seulement pour les récupérer dans de bonne conditions, mais aussi pour pouvoir ajouter d'autres lignes.

Lorsque je fais ca en php, je dit que si la ligne 1 est supprimé alors il suffit de décrémenté toutes les autres ligne de 1.
Si c'est la ligne n qui est effaçé je fait la même action pour les lignes > n.Enfin pour la dernière je décrémente nb_ligne de 1 et je la supprime.

Je vais essayé ton model de fonction anapajari, par contre je comprend pas pourquoi mes conditions marchent pas. Normalement il devrait suffir de dire :
Si mon numéro de ligne est 1 on est dans le cas 1.
Si mon numéro est égal au nombre de lignes c'est le dernier cas.
Sinon il faut passé au cas de la ligne intermédiaire.

Et la quoi qu'il en soit ca excécute mon premier if, pourtant si je met des alert il trouve bien nb_ligne qui correspond au nombre totale de ligne, et no_ligne qui correspond à la ligne en cour.
Si je met que la cas de la suppression de la dernière ligne ca marche, c'est pour ca que je me demande si j'ai la bonne syntaxe pour mes if et else if.

Message édité par mc_cut_killer le 07-04-2006 à 10:42:48

mc_cut_killer

Bon, il semble que je suis vraiment mauvais.
Voila la fonction que je veut utiliser pour la suppression de la première ligne, sachant que j'ai déjà un variable nb_ligne qui prend ++ à chaque ajout de ligne.

Code :

if (no_ligne = 1)
{
document.getElementById('details_cde').deleteRow(1);
for(var i=no_ligne+1; i<nb_ligne; i++)
{
document.getElementById('ligne_2').setAttribute("id", 'ligne_1');
document.getElementById('ligne_1').innerHTML = 1;
document.getElementById('qte_2').setAttribute("id", 'qte_1');
document.getElementById('qte_1').setAttribute("readonly", 'readonly');
document.getElementById('lib_2').setAttribute("id", 'lib_1');
document.getElementById('code_produit_2').setAttribute("id", 'code_produit_1');
document.getElementById('delaisJJ_2').setAttribute("id", 'delaisJJ_1');
document.getElementById('delaisMM_2').setAttribute("id", 'delaisMM_1');
document.getElementById('delaisAA_2').setAttribute("id", 'delaisAA_1');
document.getElementById('remise_2').setAttribute("id", 'remise_1');
document.getElementById('remise_1').setAttribute("readonly", 'readonly');
document.getElementById('prix_net_2').setAttribute("id", 'prix_net_1');
document.getElementById('prix_net_1').setAttribute("readonly", 'readonly');
document.getElementById('code_taxe_2').setAttribute("id", 'code_taxe_1');
document.getElementById('montant_ht_2').setAttribute("id", 'montant_ht_1');
}
nb_ligne --;
}

Par conséquent se devrais remplaçer tout les 2 pour i et les 1 par i-1.
Mais ca marche pas :pt1cable:

Message cité 1 fois

anapajari

s/travail/glanding on hfr/gs;

mc_cut_killer a écrit :

Mais ca marche pas :pt1cable:

:fou: :fou: :fou: S'trop compliqué d'expliquer ce qui marche pas??? Erreur JS? Rien qui se passe? Bref...

De toute façon ton algo est foireux, ce que tu dois faire c'est:

- enlever la ligne dont le numéro est passé en paramètre
- décaler toutes les lignes dont le numéro est supérieur au paramètre

Y'avait une légère boulette dans le code que je t'avais donné:

Code :

function supprimer_ligne(no_ligne){
// tu récupères le nb de lignes
var nbLignes = document.getElementById('details_cde').getElementsByTagName('tr').length;
// la tu vires la lignes, si j'ai tout compris tu fais:
document.getElementById('ligne_'+i).innerHTML = 1;
// ensuite tu boucles pour tout ceux qui sont "supérieurs"
for(var i=no_ligne+1; i<nbLignes; i++){
//et tu fais ton bouzin sur les lignes en te servant de i : document.getElementById('tonChamps_'+i)
}
}

Et ton nb_ligne ne sert strictement a rien tu peux toujours l'avoir grace à :

Code :

document.getElementById('details_cde').getElementsByTagName('tr').length

Message édité par anapajari le 07-04-2006 à 11:32:41

mc_cut_killer

Quand je dit ca marche pas sans préciser, rien ne se passe et les champs conservent le même numéro.

Pour nb_ligne, c'est ce que j'ai trouvé de plus simple pour savoir mon no de ligne, mais le problème n'est pas la.

J'vais voir ce que ca donne avec ton nouveau code

mc_cut_killer

C'est bon
Je viens de réussir à adapter ton code et ca marche, voila ce que j'ai fait :

Code :

if (no_ligne = 1)
{
document.getElementById('details_cde').deleteRow(1);
for(var i=no_ligne; i<nb_ligne; i++)
{
var j=i+1;
document.getElementById('ligne_'+j).setAttribute("id", 'ligne_'+i);
document.getElementById('ligne_'+i).innerHTML = +i;
document.getElementById('qte_'+j).setAttribute("id", 'qte_'+i);
document.getElementById('qte_'+i).setAttribute("readonly", 'readonly');
document.getElementById('lib_'+j).setAttribute("id", 'lib_'+i);
document.getElementById('code_produit_'+j).setAttribute("id", 'code_produit_'+i);
document.getElementById('delaisJJ_'+j).setAttribute("id", 'delaisJJ_'+i);
document.getElementById('delaisMM_'+j).setAttribute("id", 'delaisMM_'+i);
document.getElementById('delaisAA_'+j).setAttribute("id", 'delaisAA_'+i);
document.getElementById('remise_'+j).setAttribute("id", 'remise_'+i);
document.getElementById('remise_'+i).setAttribute("readonly", 'readonly');
document.getElementById('prix_net_'+j).setAttribute("id", 'prix_net_'+i);
document.getElementById('prix_net_'+i).setAttribute("readonly", 'readonly');
document.getElementById('code_taxe_'+j).setAttribute("id", 'code_taxe_'+i);
document.getElementById('montant_ht_'+j).setAttribute("id", 'montant_ht_'+i);
}
nb_ligne --;
}

Maintenant dernière petite question à la con, pourquoi lorsque je fais :

Code :

function supprimer_ligne(no_ligne)
{
if (no_ligne = 1)
{
suppression ligne 1 ...
}
else if (no_ligne = nb_ligne)
{
suppression dernière ligne
}
else
{
suppression intermédiaire
}
}

il me lance tout le temps le premier if ?

anapajari

s/travail/glanding on hfr/gs;

parce qu'il faut mettre == dans les ifs pour tester une condition... Sinon tu fais une affectation.
Par ailleurs ton truc est toujours dégueux laisse moi 5 mins je te montre comment j'aurrais fait...

Publicité

mc_cut_killer

Ok merci

Domage que certains tutoriaux du net propose des truc faut, sur un site il disait que la différence entre le javascript et le php était que l'on n'utilisait pas == mais =

Edit: pfff voila ca marche, moralité jamais faire confiance à personne lol

Message édité par mc_cut_killer le 07-04-2006 à 11:59:55

anapajari

s/travail/glanding on hfr/gs;

donc j'aurais fait ça!!!
pour l'html:

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<script type="text/javascript">
function addLine(){
var tbNode = document.getElementById('t');
var trNode = document.createElement('tr');
/*** col 1: no line***/
var tdNode = document.createElement('td');
tdNode.innerHTML = tbNode.getElementsByTagName('tr').length;
trNode.appendChild(tdNode);
/*** col 2: lib ***/
tdNode = document.createElement('td');
var inpNode= document.createElement('input');
inpNode.setAttribute('type', 'text');
inpNode.setAttribute('name', 'lib[]');
tdNode.appendChild(inpNode);
trNode.appendChild(tdNode);
/*** col 3: price ***/
tdNode = document.createElement('td');
inpNode= document.createElement('input');
inpNode.setAttribute('type', 'text');
inpNode.setAttribute('name', 'price[]');
tdNode.appendChild(inpNode);
trNode.appendChild(tdNode);
/*** col 4: delete***/
tdNode = document.createElement('td');
inpNode= document.createElement('input');
inpNode.setAttribute('type', 'button');
inpNode.setAttribute('value', 'sup.');
inpNode.onclick= function(event) { deleteLine(this); }
tdNode.appendChild(inpNode);
trNode.appendChild(tdNode);
/*** add line to table ***/
tbNode.appendChild(trNode);
}
function deleteLine(inpObj){
/*** line is parentNode of inpObj's parentNode ***/
document.getElementById('t').removeChild(inpObj.parentNode.parentNode);
/*** reset line no ***/
setLineNo();
}
function setLineNo(){
var lineTab = document.getElementById('t').getElementsByTagName('tr');
for ( var i=0; i<lineTab.length; i++){
lineTab[i].firstChild.innerHTML = i;
}
}
</script>
</head>
<body >
<form name="f" action="tonScript.php" method="post">
<table id="t">
<tr>
<td>Colonne 1: Nu ligne</td>
<td>Colonne 2: Lib.</td>
<td>Colonne 1: Prix</td>
<td>Supprimer</td>
</tr>
</table>
<input type="button" value="Ajouter une ligne" onclick="addLine()"/>
<input type="submit" value="valider" />
</form>
</body>
</html>

Et pour le php tu t'en foutais du coup tu récupérais des tableaux pour chacune des colonnes, comme le prouve ce petit...

Code :

<?php
print_r($_POST);
?>

Message édité par anapajari le 07-04-2006 à 12:23:55

mc_cut_killer

Un grand merci ton aide,

je vais étudier la question cette après-midi.

Bon week end et @+ :hello:

FORUM HardWare.fr

Programmation

HTML/CSS

Re-numéroation de champ après suppression de lignes d'un tableau

Sujets relatifs
Cherche exemple ArrayList, agrandir tableau dynamiquement	javascript: tableau à partir d'un string
News et tableau en array : un peu trop gros	[Perl]Code de 8 lignes à essayer sous Perl sous Linux
bordure juste pour qq cases d'un tableau	Exclusion lors d'une suppression (avec DEL)
Exclusion lors d'une suppression	Identification d'un terme et sa suppression ?
Integrer les valeurs d'un tableau php dans un menu déroulant HTML	La balise <PRE> et les sauts de lignes et CSS, PHP
Plus de sujets relatifs à : Re-numéroation de champ après suppression de lignes d'un tableau

Page générée en 0.156 secondes