DOM : suppression de colonnes

Kalas22 · 20/05/2011, 17h21

Bonjour bonjour bonjour !

J'ai un petit soucis, j'aimerais bien supprimer une colonne de mon tableau html, via javascript.

Ayant utilisé l'AJAX, j'ai besoin de de nettoyer les colonnes de mon tableau, pour y re-afficher les nouvelles données...

Merki de votre aide,

Amicalement votre.

SpaceFrog · 20/05/2011, 17h23

une piste:
http://www.developpez.net/forums/d47...hlight=tableau

flyingfr53 · 21/05/2011, 12h11

Bonjour,

tu veux les vider ou faire disparaître la colonne?

Je te conseille d'utiliser jquery, si tu n'as pas déjà utilisé ce framework va voir sur leur site ou pose la question dans le sous forum jquery

si tu veux vider la case ligne i colonne j

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$("tbody>tr:eq("+i+")>td:eq("+j+")").text();

Pour supprimer ça doit donner un truc du genre.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

   $('td[col='+j+']').remove();

Kalas22 · 23/05/2011, 10h52

Bah en fait mes colonnes changent en fonction d'un menu déroulant.

Par exemple j'ai 15 colonnes, et quand je sélectionne une autre valeur dans le menu déroulant, mon tableau ne doit compter que 5 colonnes.

Donc plutôt faire disparaître les colonnes ^^

Voila un extrait de ma table :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<tr>
<th class="vertical" id=colonne1><div class="vertical">[Nom-Proj2]Lots_machin</div></th>
<th class="vertical" id=colonne2><div class="vertical">Activité_test06</div></th>
<th class="vertical" id=colonne3><div class="vertical">Activité_test07</div></th>
<th class="vertical" id=colonne4><div class="vertical">Activité_test25</div></th>
</tr>
 
		<!-- Génération des jours du mois en cours par défaut -->
 
<tr>
<td>Mardi 01</td><td id=colonne1></td><td id=colonne2></td><td id=colonne3></td>
<td id=colonne4></td>
</tr>
<tr>
<td>Mercredi 02</td>
<td id=colonne1></td><td id=colonne2></td><td id=colonne3></td><td id=colonne4></td>
</tr>
<tr>
<td>Jeudi 03</td>
<td id=colonne1></td><td id=colonne2></td><td id=colonne3></td><td id=colonne4></td>
</tr>
<tr>
<td>Vendredi 04</td><td id=colonne1></td><td id=colonne2></td><td id=colonne3></td><td id=colonne4></td>
</tr>
<tr>
<td>Samedi 05</td><td id=colonne1></td><td id=colonne2></td><td id=colonne3></td><td id=colonne4></td>
</tr>
<tr>
<td>Dimanche 06</td><td id=colonne1></td><td id=colonne2></td><td id=colonne3></td><td id=colonne4></td>
</tr>
<tr>
<td>Lundi 07</td><td id=colonne1></td><td id=colonne2></td><td id=colonne3></td><td id=colonne4></td>
</tr>

Bovino · 23/05/2011, 11h30

Dans l'état actuel, tu ne pourras pas y arriver à partir des id puisqu'un id DOIT être unique dans la page...

Kalas22 · 23/05/2011, 11h36

Oui pardon, j'avais vu l'erreur et j'ai remplacé les id par des class

flyingfr53 · 23/05/2011, 21h37

voila une demo en jquery.

la librairie jquery est chargée en externe sur googleapis

Tu peux l'adapter à tes besoins

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
<html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<style type="text/css">
.tableau {    border-collapse:collapse ; }
.tableau   td  {padding : 0.4em ; border-spacing:0; font-weight: 500;  border:1px solid #666;border-right:none;border-left:none;  empty-cells: show; text-align:center;   }
.tableau thead tr th, .tableau tfoot tr th{background: #DDDDDD;height :30px;  border: 1px solid black;	}
 
</style>
 
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  <script type="text/javascript">
            function cachecolonne(j)
            {
            i=j-1;
            $('#matable td:nth-child('+j+'), #matable th:nth-child('+j+')').hide();
             alert(" La colonne cachée est la colonne " +j);
            }   
    </script>
</head>
 
<body>
 
   <div  align ="center">
<form name="test" >
	<br />	<br /><br />Colonne a masquer: 
 
		<select id="nbp" name="nb" OnChange=javascript:cachecolonne(value)>
 
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
		<option value="5">5</option>
		<option value="6">6</option>
		<option value="7">7</option>
		<option value="8">8</option>
		<option value="9">9</option>
		<option value="9">9</option>
		<option value="10">10</option>
		</select>
 
<br />	<br /><br />
 
        <table id="matable" class="tableau">
 
 
            <thead>
                <tr>
                    <th>Nom</th>
                    <th>Salaire brut </th>
                    <th>Salaire net</th>
                    <th>Charges patronales</th>
                </tr>
            </thead>
            <tfoot>
             <tr>
                    <th>Nom</th>
                    <th>Salaire brut </th>
                    <th>Salaire net</th>
                    <th>Charges patronales</th>
               </tr>
            </tfoot>
 
            <tbody>
                <tr>
                    <td>Moi</td>
                    <td>1000</td>
                    <td>1000cc</td>
                    <td>1000cc</td>
                </tr>
                <tr>
                    <td>Lui</td>
                    <td>2000</td>
                    <td>1000</td><td>1000cc</td>
                </tr>
                 <tr>
                    <td>Elle</td>
                    <td>2000</td>
                    <td>1000</td><td>1000cc</td>
                </tr>
                <tr>
                    <td>Autre</td>
                    <td>3000</td>
                    <td>1000</td><td>1000cc</td>
                </tr>
                 <tr>
                    <td>Autre</td>
                    <td>3000</td>
                    <td>1000</td><td>1000cc</td>
                </tr>
                 <tr>
                    <td>Autre</td>
                    <td>3000</td>
                    <td>1000</td><td>1000cc</td>
                </tr>
            </tbody>
        </table>
 
    </div>
</form>
 
</body></html>

Loceka · 24/05/2011, 11h52

Si toutes tes colonnes ont une classe et que tu veux juste les faire disparaître de l'affichage, le plus simple est de rajouter une règle dans la classe qui n'affiche plus les éléments de cette classe (display:none par exemple) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
var className = "Colonne1".toLowerCase() // le nom de la classe à cacher en minuscules
var rules= (document.styleSheets[0].cssRules)?document.styleSheets[0].cssRules:document.styleSheets[0].rules;
 
for(var i = 0; i < rules.length; i++) {
  if (rules[i].selectorText.toLowerCase() == className) {
    rules[i].style.display = "none";
  }
}

Par contre ça suppose que ta feuille CSS contient déjà une règle CSS pour chacune de ces classes.
Ca veut dire aussi que la colonne ne sera pas supprimée du DOM mais juste masquée par le CSS.

Auteur · 24/05/2011, 18h14

Citation:

Envoyé par Kalas22

Oui pardon, j'avais vu l'erreur et j'ai remplacé les id par des class

tu confonds les attributs class et id visiblement

Bovino voulais que tu gardes les id sur tes objets et que tu renommes les doublons.

Tu cibles avec document.getElementById() les objets que tu veux supprimer puis tu utilises la méthode DOM removeChild()
http://javascript.developpez.com/tut...ge=page_5#LV-B

Ou alors faire comme Loceka propose (si tes colonnes doivent disparaître de manière momentanée) utiliser la propriété CSS display:none.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById("idObjet").style.display = "none";

Par contre pour ré-afficher les objets cachés attention à la valeur que tu vas donner à display. En cas de doute ne précise rien, le navigateur donnera à la propriété de l'objet la valeur par défaut :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById("idObjet").style.display = "";

20/05/2011, 17h21	#1
Kalas22 Candidat au titre de Membre du Club Étudiant Inscription : avril 2011 Messages : 61 Détails du profil Informations personnelles : Sexe : Localisation : France, Côtes d'Armor (Bretagne) Informations professionnelles : Activité : Étudiant Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : avril 2011 Messages : 61 Points : 10 Points : 10	DOM : suppression de colonnes Bonjour bonjour bonjour ! J'ai un petit soucis, j'aimerais bien supprimer une colonne de mon tableau html, via javascript. Ayant utilisé l'AJAX, j'ai besoin de de nettoyer les colonnes de mon tableau, pour y re-afficher les nouvelles données... Merki de votre aide, Amicalement votre.
	00

20/05/2011, 17h23	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 009 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 009 Points : 45 093 Points : 45 093	une piste: http://www.developpez.net/forums/d47...hlight=tableau __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

23/05/2011, 11h30	#5
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 803 Points : 35 803	Dans l'état actuel, tu ne pourras pas y arriver à partir des id puisqu'un id DOIT être unique dans la page... __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

23/05/2011, 11h36	#6
Kalas22 Candidat au titre de Membre du Club Étudiant Inscription : avril 2011 Messages : 61 Détails du profil Informations personnelles : Sexe : Localisation : France, Côtes d'Armor (Bretagne) Informations professionnelles : Activité : Étudiant Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : avril 2011 Messages : 61 Points : 10 Points : 10	Oui pardon, j'avais vu l'erreur et j'ai remplacé les id par des class
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email