SUPPRESSION de COLONNE d"un tableau html en javascript

Fermé

MOUCHARRAF - 26 janv. 2013 à 12:24
Utilisateur anonyme - 26 janv. 2013 à 22:18

Bonjour,

j'ai un tableau en html et je veux ecrire un script qui fera les modification suivantes:

Si je clique sur une cellule de la première ligne è je supprime sa colonne complète
du tableau
Si je clique sur une cellule de la première colonne è je supprime sa ligne complète
du tableau
Si je clique sur la première cellule du tableau è aucune action
Si je clique en dehors de la colonne 1 et ligne 1 è aucune action

comme je suis debutant je sais pa par ou commencer?
voici mon code de tableau
<html>
<head>
<style> table { width:400px } td { background-color:lightgrey; text-align:center } </style>
<script type='text/javascript' src='test.js'></script>
</head>
<body>
Mon premier tableau
<table>
<tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
<tr><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td></tr>
<tr><td>K</td><td>L</td><td>M</td><td>N</td><td>O</td></tr>
<tr><td>P</td><td>Q</td><td>R</td><td>S</td><td>T</td></tr>
<tr><td>U</td><td>V</td><td>W</td><td>X</td><td>Y</td></tr>
<tr><td colspan='4'>...</td><td>Z</td></tr>
</table>
Mon second tableau
<table>
<tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
<tr><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td></tr>
<tr><td>K</td><td>L</td><td>M</td><td>N</td><td>O</td></tr>
<tr><td>P</td><td>Q</td><td>R</td><td>S</td><td>T</td></tr>
<tr><td>U</td><td>V</td><td>W</td><td>X</td><td>Y</td></tr>
<tr><td colspan='4'>...</td><td>Z</td></tr>
</table>
</body>
</html>

merci d'avance pour votre aide

A voir également:

SUPPRESSION de COLONNE d"un tableau html en javascript
Tableau croisé dynamique - Guide
Forcer la suppression d'un fichier - Guide
Tableau ascii - Guide
Déplacer une colonne excel - Guide
Comment faire un tableau - Guide

6 réponses

Réponse 1 / 6

Utilisateur anonyme
26 janv. 2013 à 13:54

Bonjour

Plusieurs problèmes :

Tu écris suppression avec deux 'p' dans la définition de la fonction, mais un seul dans le onclick.

Tu définis ta fonction avec un paramètre ligne, mais tu n'en passes aucun à l'appel : l'appel ne risque pas d'aboutir car il ne sait pas sur quoi travailler. Il faut définir la fonction sans paramètre, et utiliser 'this' qui désigne l'objet auquel est associé la fonction - donc chaque fois une cellule de tête de ligne :

function suppressionL() { 
document.getElementById('tableau').deleteRow(this.rowIndex); ...

Enfin, je ne comprends pas très bien ta balise d'ouverture de script qui sert à la fois d'inclusion d'un fichier extérieur et de début de script. Je pensais que les deux fonctions devaient être séparées, mais là je ne suis pas du tout sûr de moi.

Réponse 2 / 6

MOUCHARRAF
26 janv. 2013 à 12:35

mon probléme c"est que le tableau est en HTML
j'arrive pas à lui appliquer la fonction suppression

<!DOCTYPE html>
<html>
<head>
<style> table { width:400px } td { background-color:lightgrey; text-align:center } </style>
<script type='text/javascript' src='test.js'>

function suppressionL(ligne)
{
document.getElementById('tableau').deleteRow(ligne.rowIndex);

//Recomptage des lignes...
var tableau = document.getElementById('tableau');
var trs = tableau.rows;
var n = trs.length;
var i;

alert(n);
for (i=1; i<n; i++) //on commence à 1 et non à 0 ;)
{
trs[i].cells[0].innerHTML = trs[i].rowIndex;
}
}
</script>
</head>
<body>
Mon premier tableau
<table name= "tableau" id="tableau" >
<tr><td>A</td><td><input type="button" value="E" onclick="supressionL()"></td><td><input type="button" value="C" onclick="supressionC()"></td><td><input type="button" value="D" onclick="supressionC()"></td><td><input type="button" value="E" onclick="supressionC()" ></td></tr>
<tr><td>F <input type="button" value="F" onclick="supressionL()"> </td><td>G</td><td>H</td><td>I</td><td>J</td></tr>
<tr><td><input type="button" value="K" onclick="supressionL()" ></td><td>L</td><td>M</td><td>N</td><td>O</td></tr>
<tr><td><input type="button" value="P" onclick="supressionL()" ></td><td>Q</td><td>R</td><td>S</td><td>T</td></tr>
<tr><td><input type="button" value="U" onclick="supressionL()" ></td><td>V</td><td>W</td><td>X</td><td>Y</td></tr>
<tr><td colspan='4'><input type="button" value="..." onclick="supressionL()" ></td><td>Z</td></tr>
</table>
Mon second tableau
<table>
<tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
<tr><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td></tr>
<tr><td>K</td><td>L</td><td>M</td><td>N</td><td>O</td></tr>
<tr><td>P</td><td>Q</td><td>R</td><td>S</td><td>T</td></tr>
<tr><td>U</td><td>V</td><td>W</td><td>X</td><td>Y</td></tr>
<tr><td colspan='4'>...</td><td>Z</td></tr>
</table>

</body>
</html>

Réponse 3 / 6

MOUCHARRAF Messages postés 3 Date d'inscription samedi 26 janvier 2013 Statut Membre Dernière intervention 26 janvier 2013
26 janv. 2013 à 14:48

j"ai corrigé les erreurs ,
et j'ai essayé avec les deux solution :les deux fonction du script separe et jointe mai ca marche tjr pas
en faite il fait rien du tout quand je clique sur une cellule de tête de ligne

je sais pas le probleme viens d'ou?

Utilisateur anonyme
26 janv. 2013 à 15:46

J'ai fait les corrections que je t'ai indiquées et ça marche. (pour les lignes, car il n'y a pas de fonction toute faite pour les colonnes)
Utilise la console javascript de ton navigateur pour voir quelles erreurs elle t'affiche.

Réponse 4 / 6

MOUCHARRAF Messages postés 3 Date d'inscription samedi 26 janvier 2013 Statut Membre Dernière intervention 26 janvier 2013
26 janv. 2013 à 18:46

tu peux m'envoyer ton code complet pour voir ou ca marche pas,
j'arrive toujours pas à trouver l'erreur
merci

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 6

MOUCHARRAF Messages postés 3 Date d'inscription samedi 26 janvier 2013 Statut Membre Dernière intervention 26 janvier 2013
26 janv. 2013 à 18:47

<!DOCTYPE html>
<html>
<head>
<style> table { width:400px } td { background-color:lightgrey; text-align:center } </style>
<script type='text/javascript'

function suppression()
{
document.getElementById('tableau').deleteRow(this.rowIndex);

//Recomptage des lignes...
var tableau = document.getElementById('tableau');
var trs = tableau.rows;
var n = trs.length;
var i;

alert(n);
for (i=1; i<n; i++) //on commence à 1 et non à 0 ;)
{
trs[i].cells[0].innerHTML = trs[i].rowIndex;
}
} >
</script>
</head>
<body>
Mon premier tableau
<table name= "tableau" id="tableau" >
<tr><td>A</td><td><input type="button" value="E" onclick="suppression()"></td><td><input type="button" value="C" onclick="supressionC()"></td><td><input type="button" value="D" onclick="supressionC()"></td><td><input type="button" value="E" onclick="supressionC()" ></td></tr>
<tr><td> <input type="button" value="F" onclick="suppression()"> </td><td>G</td><td>H</td><td>I</td><td>J</td></tr>
<tr><td><input type="button" value="K" onclick="suppression()" ></td><td>L</td><td>M</td><td>N</td><td>O</td></tr>
<tr><td><input type="button" value="P" onclick="suppression()" ></td><td>Q</td><td>R</td><td>S</td><td>T</td></tr>
<tr><td><input type="button" value="U" onclick="suppression()" ></td><td>V</td><td>W</td><td>X</td><td>Y</td></tr>
<tr><td colspan='4'><input type="button" value="..." onclick="suppression()" ></td><td>Z</td></tr>
</table>
Mon second tableau
<table>
<tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
<tr><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td></tr>
<tr><td>K</td><td>L</td><td>M</td><td>N</td><td>O</td></tr>
<tr><td>P</td><td>Q</td><td>R</td><td>S</td><td>T</td></tr>
<tr><td>U</td><td>V</td><td>W</td><td>X</td><td>Y</td></tr>
<tr><td colspan='4'>...</td><td>Z</td></tr>
</table>

</body>
</html>

Réponse 6 / 6

Utilisateur anonyme
26 janv. 2013 à 22:18

J'ai l'impression que tu n'as pas compris ce que j'ai voulu dire à propos de la balise script.
il faut bien la fermer avec un > avant le code et pas après.

Sinon, je m'étais trompé, j'avais fait mes essais un peu vite, c'était toujours le rang 0 qui s'effaçait et je ne l'avais pas remarqué.
En fait, la propriété rowIndex s'applique aux objets TR.
Or, l'objet qui fait l'appel est un objet <input> qui est dans un objet <td> qui est dans l'objet <tr> qu'on désire supprimer. À partir de l'objet de départ, il faut donc utiliser deux fois parentNode pour remonter à la ligne et pourvoir utiliser rowIndex.

D'où le code re-modifié (et un peu mieux testé cette fois) :

function suppression(inp) 
{ 
var ligne= inp.parentNode.parentNode.rowIndex; // retrouve la ligne à partir de l'input
document.getElementById('tableau').deleteRow(ligne); 
...

et le 'this' doit en fait être mis dans le onclick :
<input type="button" value="P" onclick="suppression(this)" >

Discussions similaires

tableau C

Bibliothèque