Nous sommes actuellement le 29 Mars 2024, 11:38

Le fuseau horaire est UTC-5 heures [Heure d’été]




Publier un nouveau sujet Répondre au sujet  [ 1 message ] 
Auteur Message
MessagePublié: 23 Oct 2009, 06:42 
Hors-ligne
Occasionnel
Occasionnel
Avatar de l’utilisateur

Inscription : 17 Août 2002, 09:24
Message(s) : 200
Bonjours à tous,

J'utilise une fonction javascript pour ajouter et supprimer des lignes dans une table. Mon problème est au niveau de la suppression de ligne. Merci beaucoup à ceux qui pourront m'aider.

1er problème: Tout fonctionne sauf que lorsque des données sont entrées dans les champs TEXTAREA, le script efface tout les autres TEXTAREA. Il y a seulement le premier INPUT qui fonctionne dans chaque ajout de ligne.

2ieme problème: Pour chaque ligne ajouté, il y a un bouton à gauche et un image à droit qui permet de supprimer la ligne, mais le bouton de gauche ne fonctionne pas lorsqu'il reste 1 ligne à supprimer.



Voici mon code complèt pour supprimer une ligne dans une table avec javascript:

Code :
<html><head><title></title></head>
<body>
<input type="button" value="Ajouter" onClick="addRow('table0');">
<input id="cnt" type="text" value="0">

<br>
<br>
<table id="table0" border="0" cellspacing="0" cellpadding="0" style="font-size:12px; color:#999999;">
<tbody>
</tbody>
</table>
<br>
<br>
<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
      // les identifiants des objets générés contiennent le rowIndex(+1) de la ligne insérée
      //
      // Exemple d'utilisation dans le innerHTML:
      // 'Fichier n° ' + idx + '<input type="text" id="iA' + idx + '"><input type="text" id="iB' + idx + '">'
      //
      //
      myCell.innerHTML = '<table border="0" cellspacing="0" cellpadding="0" style="font-size:12px; color:#999999;">'
      +'<tr>'
      +'<td width="60" align="left" valign="top" style="border-right:1px dashed #999999;">Fichier n° ' + idx + '<br><br><a id="btn_del' + idx + '" title="Supprimer ce fichier" style="color:#003366; cursor:hand;" onMouseOver="this.style.color=\'#FF0000\';" onMouseOut="this.style.color=\'#003366\';" onclick="delRow(\'table0\',' + idx + ');">Supprimer</a></td>'
      +'<td align="center" valign="middle" width="140" height="140" style="border-top:1px dashed #999999; border-bottom:1px dashed #999999; padding:5px;"><img src="http://intranet.sbi-international.com/images/Empty_folder_128.png" width="138" height="138" style="border:1px dashed #999999;;"><br><br><a  title="Modifier ce fichier" style="color:#003366; cursor:hand; font-size:16px;" onMouseOver="this.style.color=\'#FF0000\';" onMouseOut="this.style.color=\'#003366\';">Modifier</a><br><br></td>'
      +'<td align="left" valign="top" style="border-top:1px dashed #999999; border-bottom:1px dashed #999999; border-right:1px dashed #999999; padding:5px;"><u>Titre du fichier:</u><br><input name="txtTitre"  id="iA' + idx + '" type="text" size="92" maxlength="90"><br><u>Description du fichier:</u><br><textarea name="txtContenu" id="iB' + idx + '" cols="70" rows="8"></textarea><br><input name="txtImgLink" type="text"></td>'
      +'</tr><tr><td colspan="3" height="20"></td></tr></table>';
      // insertion d'une seconde cellule sur la ligne
      myCell = myRow.insertCell(-1);
      // remplissage de la seconde cellule avec les boutons
      // 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="btn_del' + idx + '" src="http://intranet.sbi-international.com/icones/page_white_delete.png" onclick="delRow(\'table0\',' + idx + ');">';
      getel('cnt').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
         //
         //
         // exemple de suppression
         // 'Fichier n° ' + j + '<input type="text" id="iA' + j + '" value="' + ins[0].value + '"><input type="text" id="iB' + j + '" value="' + ins[1].value + '">'
         //
         var ins = ta.tBodies[0].rows[i].cells[0].getElementsByTagName('input');
         ta.tBodies[0].rows[i].cells[0].innerHTML = '<table border="0" cellspacing="0" cellpadding="0" style="font-size:12px; color:#999999;">'
         +'<tr>'
         +'<td width="60" align="left" valign="top" style="border-right:1px dashed #999999;">Fichier n° ' + j + '<br><br><a id="btn_del' + j + '" title="Supprimer ce fichier" style="color:#003366; cursor:hand;" onMouseOver="this.style.color=\'#FF0000\';" onMouseOut="this.style.color=\'#003366\';" onclick="delRow(\'table0\',' + idx + ');">Supprimer</a></td>'
         +'<td align="center" valign="middle" width="140" height="140" style="border-top:1px dashed #999999; border-bottom:1px dashed #999999; padding:5px;"><img src="http://intranet.sbi-international.com/images/Empty_folder_128.png" width="138" height="138" style="border:1px dashed #999999;;"><br><br><a  title="Modifier ce fichier" style="color:#003366; cursor:hand; font-size:16px;" onMouseOver="this.style.color=\'#FF0000\';" onMouseOut="this.style.color=\'#003366\';">Modifier</a><br><br></td>'
         +'<td align="left" valign="top" style="border-top:1px dashed #999999; border-bottom:1px dashed #999999; border-right:1px dashed #999999; padding:5px;"><u>Titre du fichier:</u><br><input name="txtTitre" id="iA' + j + '" value="' + ins[0].value + '" type="text" size="92" maxlength="90"><br><u>Description du fichier:</u><br><textarea name="txtContenu" id="iB' + j + '" cols="70" rows="8"></textarea><br><input name="txtImgLink" type="text"></td>'
         +'</tr><tr><td colspan="3" height="20"></td></tr></table>';
         // dans la seconde cellule, on remet à niveau les identifiants des objets img
         ta.tBodies[0].rows[i].cells[1].innerHTML = '<img id="btn_del' + j + '" src="http://intranet.sbi-international.com/icones/page_white_delete.png" onclick="delRow(\'table0\',' + j + ');">';
      }
      getel('cnt').value--;
   }
</script>
</body>
</html>


Haut
 Profil  
Répondre en citant  
Afficher les messages publiés depuis :  Trier par  
Publier un nouveau sujet Répondre au sujet  [ 1 message ] 

Le fuseau horaire est UTC-5 heures [Heure d’été]


Qui est en ligne ?

Utilisateur(s) parcourant ce forum : Aucun utilisateur inscrit et 11 invité(s)


Vous ne pouvez pas publier de nouveaux sujets dans ce forum
Vous ne pouvez pas répondre aux sujets dans ce forum
Vous ne pouvez pas éditer vos messages dans ce forum
Vous ne pouvez pas supprimer vos messages dans ce forum

Recherche de:
Aller vers :  
Propulsé par phpBB® Forum Software © phpBB Group
Traduction et support en françaisHébergement de site