Accueil > Forum > > > > Suppression d'une ligne d'un tableau js
 Suppression d'une ligne d'un tableau js
mardi 6 octobre 2009 à 21:26:17 |
Suppression d'une ligne d'un tableau js
alaska749
|
Bonsoir,
Après avoir souffert pour créer une simple table dynamique en javascript, je doit maintenant pouvoir supprimer n'aimporte quelle ligne de ce dernier... malheureusement je ne voit vraiment pas comment je peut accéder au différente ligne de ce table...j'ai fait plusieurs tentatives mais biensur ...je tourne en rond ...
Est-ce qu'une personne pourrait s.v.p m'aider à résoudre ce problème ?
Qu'ai-je fait de faux ? M'y suis mal pris dans la construction de ce tableau ?
Merci bcp pour votre coup de main.
Code Javascript : function creertablehtml(valeur)
{
// recherche de l'élément parent dans lequel on va insèrer la nouvelle table
var parentelt = document.getelementbyid('upload_test');
// efface le contenu de l'élément parent
parentelt.innerhtml="";
var table = document.createelement("table"); // création d'une nouvelle table = élément <table>
table.setattribute("border", "1"); // donne une bordure à la table (facultatif)
var tablebody = document.createelement("tbody"); // création du corps de la table
var row = document.createelement("tr"); // création d'une nouvelle ligne= élément <tr>
var cell = document.createelement("th"); // on insère les entêtes
cell.innerhtml= "lien de l'image";
row.appendchild(cell);
var cell = document.createelement("th"); // on insère les entêtes
cell.innerhtml= "effacement ?";
row.appendchild(cell);
tablebody.appendchild(row);
var chaine = valeur;
var tableau = chaine.split(',');
var nbrrow = tableau.length;
for(var rowindex = 0; rowindex < nbrrow; rowindex++) // pour chaque ligne
{
row = document.createelement("tr"); // création d'une nouvelle ligne= élément <tr>
for(var colindex = 0; colindex < 2; colindex++) // pour chaque colonne
{
cell = document.createelement("td"); // création d'une nouvelle cellule = élément <td>
if (colindex == 0) {
var test = tableau[rowindex];
cell.innerhtml="<a href=\""+tableau[rowindex]+"\" target=\"_blank\" />"+tableau[rowindex]+"</a> ";
}
else{
cell.innerhtml= '<a href=\"\" onclick=\"delete_ligne(this.row)\">erase</a> ';
}
row.appendchild(cell); // ajoute la cellule dans la ligne
}
tablebody.appendchild(row); // ajoute la ligne à la fin du corps du tableau
}
table.appendchild(tablebody); // ajoute le corps du tableau dans la table
parentelt.appendchild(table); // ajoute la table dans l'élément parent.
}
function delete_ligne(){
document.getelementbyid('tablebody').deleterow(-1);
}
|
|
mardi 13 octobre 2009 à 15:01:08 |
Re : Suppression d'une ligne d'un tableau js
Zobibol
|
Bien le bonjour, depuis le temps qu'il traine ce message...
Alors on va commencer par les choses qui fâche (pas trop mais ça m'a fait perdre du temps):
document.createelement est une fonction qui n'existe pas : document.createElement, elle existe (la casse)
idem pour getelementbyid.... bref, quasiment toutes les méthodes.
deleteRow (pas deleterow) (-1) supprime inévitablement la dernière ligne...
ça aurait été sympas de mettre un exemple concret d'utilisation, j'ai un peut misérer pour trouver comment remplir la liste mais je crois que j'y suis arrivé.
<a href=\"\" <- ça c'est pas sympas, ça rafraîchi la page alors, il faut mettre: <a href=\"#\"
Enfin, une solution de proposée (pas forcément la meilleur mais elle fonctionne)
Code HTML : <html>
<head>
<script>
function creertablehtml(valeur)
{
// recherche de l'élément parent dans lequel on va insèrer la nouvelle table
var parentelt = document.getElementById('upload_test');
// efface le contenu de l'élément parent
parentelt.innerHTML="";
var table = document.createElement("table"); // création d'une nouvelle table = élément <table>
table.setAttribute("border", "1"); // donne une bordure à la table (facultatif)
table.id = "tablebody"; // !!! parceque sans id, c'est plus dur de retrouver la table en question !!!!!
var tablebody = document.createElement("tbody"); // création du corps de la table
var row = document.createElement("tr"); // création d'une nouvelle ligne= élément <tr>
var cell = document.createElement("th"); // on insère les entêtes
cell.innerHTML= "lien de l'image";
row.appendChild(cell);
var cell = document.createElement("th"); // on insère les entêtes
cell.innerHTML= "effacement ?";
row.appendChild(cell);
tablebody.appendChild(row);
var chaine = valeur;
var tableau = chaine.split(',');
var nbrrow = tableau.length;
for(var rowindex = 0; rowindex < nbrrow; rowindex++) // pour chaque ligne
{
row = document.createElement("tr"); // création d'une nouvelle ligne= élément <tr>
for(var colindex = 0; colindex < 2; colindex++) // pour chaque colonne
{
cell = document.createElement("td"); // création d'une nouvelle cellule = élément <td>
if (colindex == 0) {
var test = tableau[rowindex];
cell.innerHTML="<a href=\""+tableau[rowindex]+"\" target=\"_blank\" />"+tableau[rowindex]+"</a> ";
}
else{
//!!!! on supprime la cellule mère (this.parentNode). Mais pourquoi ??? simplement parce que l'index change à chaque suppression !!!!
cell.innerHTML= '<a href=\"#\" onclick=\"delete_ligne(this.parentNode)\">erase</a> ';
}
row.appendChild(cell); // ajoute la cellule dans la ligne
}
tablebody.appendChild(row); // ajoute la ligne à la fin du corps du tableau
}
table.appendChild(tablebody); // ajoute le corps du tableau dans la table
parentelt.appendChild(table); // ajoute la table dans l'élément parent.
}
function delete_ligne(_obj){
// récupère la balise TR (parentNode) mais surtout son index (rowIndex)
var _idx = _obj.parentNode.rowIndex;
// et hop on la supprime
document.getElementById('tablebody').deleteRow(_idx);
}
function init(){
var chaine = "titi,tata,tt,tt,kgkg,tkk,kkfd,kkt";
creertablehtml(chaine);
}
window.onload=init;
</script>
</head>
<body>
<div id="upload_test">
</div>
</body>
a tester il va s'en dire.
Note: j'ai mis quelques commentaires (ils commencent par: !!!!)
voilà
[o-_-o] |
|
Cette discussion est classée dans : ligne, table, tableau, var, cell
 Répondre à ce message
 Sujets en rapport avec ce message
suppression ligne tableau [ par touriste80 ]
BonjourJ'ai un ptit souci!! dans une colonne d'un tableau j'ai supprimé pour supprimer la ligne que je veux dans le tableau. chaque ligne rajoutée dan
Supprime toujours la dernière ligne du tableau ? [ par alaska749 ]
Bonsoir, J'ai ré-adapté un code trouvé afin qu'il m'initialise et me crée à chaque appel de la fonction, un tableau dynamique en fonction d'une chain
Dupliquer une ligne d'un tableau html javascript DOM [ par lord1366 ]
Bonjour, voici mon problème : Je voudrais copier une ligne d'un tableau html (celà fonctionne sous Mozilla, Opera, Safari, IE8 mais pas sous IE6 et I
Parcours d'un tableau en JS [ par Canyata ]
Bonjour à tous [^^happy17] J'ai une question à vous poser. J'ai un tableau en HTML sur ma page: [code=php]echo""; echo""; echo""; echo"";
Ajout/suppression d'un champ input type -> Problème de récupération du tableau $_POST [ par alaska749 ]
Bonjour, j'ai récupérer le script js ci-dessous permettant d'ajouter ou supprimer des input type text... ce script fonctionnne très bien mais je n'arr
balayer un tableau en javascript [ par orionis1 ]
bonjour à tous,Débutant en javasacript, je me heurte au problème suivant :Je développe une page html (couplée à du php) de saisie de bon de commande.J
Créer cellule td dans un tableau html [ par mike1310 ]
Bonjour,J'ai un probleme de compatibilité entre IE et Mozilla (le truc super rare !!! ).Mon probleme lors d'un clic, sur un bouton, je dois pouvoir aj
[Javascript] Gestion de liste et de nombre [ par Shirox ]
Tous d'abord bonjour, et merci de vous être attarder sur ce sujet :) .Je m'excuse si le titre n'est pas très précis, mais je ne voyais pas trop comm
Formulaire : Ajouter une ligne sans reload [ par coraziari ]
Bonjour,Je réalise un formulaire de saisie de CV mais je galère un peu pour les expériences. En effet, pour ne pas "polluer" trop la page, j'ai mis un
Créer une ligne dans une table (en 1ere position) [ par lipao ]
bonjour c'est tout bete, tout est dans le titre... je voudrais créer une ligne dans une table et qu'elle soit la 1ère ligne c'est à dire passer de
 Livres en rapport
|
Derniers Blogs
 POUR RAPPEL ! LES SPéCIFICATIONS DES PROTOCOLES OFFICE ET SHAREPOINT SONT DISPONIBLES SUR MSDNPOUR RAPPEL ! LES SPéCIFICATIONS DES PROTOCOLES OFFICE ET SHAREPOINT SONT DISPONIBLES SUR MSDN par neodante
Quelle est le point commun entre : Microsoft il y a 10 ans et Apple aujourd'hui ? Réponse: avoir une politique de protocoles propriétaires et fermés :) Car pour rappel (si si je vous assure c'est important de le rappeler), la majorité des spécifications e...
Cliquez pour lire la suite de l'article par neodante JOYEUX ANNIVERSAIRE NIXJOYEUX ANNIVERSAIRE NIX par ebartsoft
Souhaitons un bon et joyeux anniversaire à notre hôte à tous, Nix.
Je ne le répéterais jamais assez mais sans lui rien ne serait possible. Il défit en permanence les lois de la gravité et comme il le dit si bien, si tu lui fais confiance ça devra...
Cliquez pour lire la suite de l'article par ebartsoft IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc
Logiciels
 sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|