Sujet Précédent Sujet Suivant

Suppression d'une ligne d'un tableau js

alaska749 Messages postés 15 Date d'inscription lundi 20 juillet 2009 Statut Membre Dernière intervention 7 octobre 2009 - 6 oct. 2009 à 21:26
Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 - 13 oct. 2009 à 15:01
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. 

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=""+tableau[rowIndex]+" ";
}
else{
cell.innerHTML= 'erase ';
}
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);
}

1 réponse

Réponse 1 / 1
Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 6
13 oct. 2009 à 15:01
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é.
[*]
<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=""+tableau[rowindex]+" ";
}
else{
//!!!! on supprime la cellule mère (this.parentNode). Mais pourquoi ??? simplement parce que l'index change à chaque suppression !!!!
cell.innerHTML= 'erase ';

}
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>






</code>


a tester il va s'en dire.

Note: j'ai mis quelques commentaires (ils commencent par: !!!!)

voilà


[o-_-o]
0

Discussions similaires

faire un examen en ligne avec QCM
roomi23 -
nhervagault -

1 réponse
Dernière cellule non vide d'une colonne
cs_falafala -
Luigi13013 -

5 réponses
chronometre en milliseconde
sarici -
sarici -

3 réponses
afficher un tableau en php
Larose_1921 -
s -

1 réponse
simplifier une fraction ( débutant ) !!!
myogtha -
GoldenEye -

3 réponses
Rejoignez-nous