Aller au contenu
  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

[Javascript] Modifier un tableau après action


mofo

Messages recommandés

Bonjour,

 

Voilà mon problème. Après une action, je veux modifier un tableau (sans recharger la page).

 

<table>
 <tr id=1>
   <td></td> 
 </tr>
 <tr id=2>
   <td></td>
 </tr>
</table>

 

Lorsque je clique sur un bouton, je veux ajouter une ligne dans mon tableau, je fais donc comme ca :

 

document.getElementById(2).innerHTML = document.getElementById(2).innerHTML+'[B]</tr>[/B]<tr id=3><td></td>';

 

En fait je recupère la dernière ligne et je lui en ajoute une.

 

Le problème est qu'il me fait un truc bizarre, la balise <tr> (que j'ai mis en gras plus haut, se retrouve en fin de chaine et du coup, j'ai à la fin : '</tr></tr>' !!!

 

Mais pourquoi ca ?

 

Si vous avez une idée ou une autre méthode ???

 

Merci d'avance

Lien vers le commentaire
Partager sur d’autres sites

1) N'oublie pas les guillemets pour les id. <tr id="1"> et getElementById("1")

 

2) innerHTML c'est déprécié (et c'était valable uniquement pour IE pendant un bon bout de temps)

 

3) http://kewlcat.no-ip.org/tests/exemple.html

  function ajoutLigne() {
     // Nouveau TD (colonne de gauche)
     var newData1 = document.createElement('td');
     newData1.appendChild(document.createTextNode('Nouveau champ :'));
     newData1.align="right";

     // Nouveau TD (colonne de droite)
     var newInput = document.createElement('input');
     newInput.setAttribute("name","nouveau");
     newInput.setAttribute("type","text");
     newInput.setAttribute("class","textInput");

     var newData2 = document.createElement('td');
     newData2.appendChild(newInput);

     // Nouveau TR
     var newRow = document.createElement('tr');
     newRow.appendChild(newData1);
     newRow.appendChild(newData2);

     // Ajout du nouveau TR au tableau
     document.getElementById("tableau").appendChild(newRow);
 }

Lien vers le commentaire
Partager sur d’autres sites

Merci pour ta réponse, mais j'ai le me soucis ...

 

Voilà mon code à tester :

 

  <script>
 function ajoutLigne() {
    // Nouveau TD (colonne de gauche)
    var newData1 = document.createElement('td');
    newData1.appendChild(document.createTextNode('Nouveau champ :'));
    newData1.align="right";

    // Nouveau TD (colonne de droite)
    var newInput = document.createElement('input');
    newInput.setAttribute("name","nouveau");
    newInput.setAttribute("type","text");
    newInput.setAttribute("class","textInput");

    var newData2 = document.createElement('td');
    newData2.appendChild(newInput);

    // Nouveau TR
    var newRow = document.createElement('tr');
    newRow.appendChild(newData1);
    newRow.appendChild(newData2);

    // Ajout du nouveau TR au tableau
    document.getElementById("tableau").appendChild(newRow);
}
</script>

<table border="1">
 <tr id="tableau">
 	<td>1</td>
 	<td>1.1</td>
 </tr>
</table>

<input type="button" onclick="ajoutLigne();">

 

Que passa ?

UPDATE :

 

C'est OK avec un tbody ...

Modifié par mofo
Lien vers le commentaire
Partager sur d’autres sites

Je te donne juste un indice : insertBefore()

Si tu n'as qu'une référence au Node précédent (et pas le suivant, puisqu'il faut bien avouer que insertBefore est plus pratique si on veut insérer une ligne avant une autre que si on veut en insérer une après), tu peux utiliser nextSibling() pour retrouver, par exemple à partir d'un tr, le tr suivant.

Lien vers le commentaire
Partager sur d’autres sites

  • 2 semaines après...

Salut, sinon tu peux essayer avec outerHTML.

 

Ca fonctionne comme innerHTML, sauf que ça remplace l'élément sur lequel ça agit par le contenu que tu auras indiqué.

 

Donc, si tu veux insérer un ligne après une autre (après <td id="1">contenu</td> par exemple), tu fais :

 

document.getElementById('1').outerHTML=document.getElementById('1').outerHTML+"<tr><td>ta nouvelle ligne</td></tr>";

 

Je n'ai pas testé mais ça doit marcher.

 

ps : outerHTML fonctionne à partir de IE4 et NN6. Pour FF je ne sais pas.

 

 

J'espère que ça va t'aider. a+

Lien vers le commentaire
Partager sur d’autres sites

  • 3 semaines après...

Salut,

 

tu fais exactement ce que je cherche à faire ... (ajouter une ligne entre 2 lignes d'un tableau déjà existant).

 

Tu pourrais me filer le lien / code de ton résultat qui commence a "ressembler a qqchose" ?

 

Sinon, plus poussé, et a tout hasard, il ne serait pas possible de choisir, par une liste déroulante, le nombre de cellules à ajouter entre les 2 lignes déjà existantes du tableau ?

 

Merci !!!

Modifié par NothingHere
Lien vers le commentaire
Partager sur d’autres sites

Désolé pas trop le temps. Voilà le code pour une ligne :

 

  function ajoutLien(idTbody,id,nom,ladate,ecart) {
    // Nouveau TD (colonne de gauche)
    window.alert(ecart);
    doss_id = 0;
    var newData1 = window.parent.document.createElement('td');
    newData1.innerHTML = '<a href="pop_go.php?url='+id+'" target="_blank"><img src="./img/links/zoom.gif" border="0"></a><a href=# onclick=edit_lien('+id+','+doss_id+')><img src="./img/links/edit.gif" border="0"></a>';
    newData1.setAttribute("width","5%");
    newData1.align="left";
    var newData2 = window.parent.document.createElement('td');
    newData2.innerHTML = ecart+'<a href="pop_go.php?url='+id+'" target="_blank">'+nom+'</a>';
    newData2.setAttribute("width","60%");
    newData2.align="left";
    var newData3 = window.parent.document.createElement('td');
    newData3.setAttribute("width","15%");
    newData3.innerHTML = ladate;
    newData3.align="left";
    var newData4 = window.parent.document.createElement('td');
    newData4.appendChild(window.parent.document.createTextNode('0'));
    newData4.setAttribute("width","10%");
    newData4.align="left";
    var newData5 = window.parent.document.createElement('td');
    newData5.appendChild(window.parent.document.createTextNode(' '));
    newData5.setAttribute("width","5%");
    newData5.align="left";
    var newData6 = window.parent.document.createElement('td');
    newData6.appendChild(window.parent.document.createTextNode(' '));
    newData6.setAttribute("width","5%");
    newData6.align="left";

    // Nouveau TR
    var newRow = window.parent.document.createElement('tr');
    newRow.appendChild(newData1);
    newRow.appendChild(newData2);
    newRow.appendChild(newData3);
    newRow.appendChild(newData4);
    newRow.appendChild(newData5);
    newRow.appendChild(newData6);

    // Ajout du nouveau TR au tableau
    window.parent.document.getElementById(idTbody).appendChild(newRow);
}

Modifié par mofo
Lien vers le commentaire
Partager sur d’autres sites

Merci de ta réponse !

 

Pour mémoire, et pour tout autre qui se poserait une question, voici un code fonctionnel ...

 

<html>
<head>
<script>
function ajoutLien() {
   // Nouveau TD (colonne de gauche)
   var newData1 = window.parent.document.createElement('td');
   newData1.innerHTML = 'data1';
   var newData2 = window.parent.document.createElement('td');
   newData2.innerHTML = 'data2';

   // Nouveau TR
   var newRow = window.parent.document.createElement('tr');
   newRow.appendChild(newData1);
   newRow.appendChild(newData2);

   // Ajout du nouveau TR au tableau
   document.getElementById("tableau").appendChild(newRow);
}
</script>
</head>

<body>

<table border="1">
<tr id="tableau">
 <td>1</td>
 <td>1.1</td>
</tr>
<tr>
 <td>2</td>
 <td>2.2</td>
</tr>
</table>


<br><br>
<input type="button" value="Nouvelle Ligne" onclick="ajoutLien();">

</body>

</html>

 

Merci pour tout.

Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...