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

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 = "";

DOM : suppression de colonnes

JavaScript

Discussions similaires

Partager

Partager