DOM : suppression de colonnes

Version imprimable

20/05/2011, 17h21
Kalas22

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. :P
20/05/2011, 17h23
SpaceFrog

une piste:
http://www.developpez.net/forums/d47...hlight=tableau
21/05/2011, 12h11
flyingfr53
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:

1 2 $("tbody>tr:eq("+i+")>td:eq("+j+")").text();
Pour supprimer ça doit donner un truc du genre.

Code:

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

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:

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>

23/05/2011, 11h30
Bovino

Dans l'état actuel, tu ne pourras pas y arriver à partir des id puisqu'un id DOIT être unique dans la page...
23/05/2011, 11h36
Kalas22

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

voila une demo en jquery.

la librairie jquery est chargée en externe sur googleapis

Tu peux l'adapter à tes besoins

Code:

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>

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:

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.

24/05/2011, 18h14
Auteur
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 :roll: 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:

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:

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