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:

mofo

[Javascript] Modifier un tableau après action

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

Partager ce message


Lien à poster
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);
 }

Partager ce message


Lien à poster
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

Partager ce message


Lien à poster
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.

Partager ce message


Lien à poster
Partager sur d’autres sites

Nickel, ca commence à ressembler à quelquechose ...

 

Merci beaucoup KewlCat

 

Je fais péter le lien vers le site dès que tout est OK.

 

+

Partager ce message


Lien à poster
Partager sur d’autres sites

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+

Partager ce message


Lien à poster
Partager sur d’autres sites

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

Partager ce message


Lien à poster
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

Partager ce message


Lien à poster
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.

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

  • En ligne récemment   0 membre est en ligne

    Aucun utilisateur enregistré regarde cette page.

×