Somme dans table html

Version imprimable

Bonjour à tous,

J'ai un problème avec un script jquery, qui fonctionne très bien pour additionner des chiffres dans une table html, mais dès que je veux utiliser les balises <thead><tbody> et <tfoot>, ça ne fonctionne plus.

Merci d'avance pour votre aide.

Ci-dessous le code :

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
 
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
    function tally (selector) 
    {
      $(selector).each(function () 
      {
          var total = 0,
          column = $(this).siblings(selector).andSelf().index(this);
          $(this).parents().prevUntil(':has(' + selector + ')').each(function () 
          {
            total += parseFloat($('td.sum:eq(' + column + ')', this).html()) || 0;
          })
          $(this).html(total);
     });
    }
  tally('td.subtotal');
  tally('td.total');
});
</script>
</head>
<body>
<table border="1" width="500" id="data">
<thead>
  <tr align="center" bgcolor="#CCCCCC">
    <th>Name</th>
    <th>Age</th>
    <th>Weight</th>
    <th>Number</th>
  </tr>
</thead>
<tbody>
  <tr align="center">
    <td>Joe</td>
    <td class="sum">1</td>
    <td class="sum">200</td>
    <td class="sum">1</td>
  </tr>
  <tr align="center">
    <td>Jack</td>
    <td class="sum">29</td>
    <td class="sum">100</td>
    <td class="sum">1</td>
  </tr>
  <tr>
    <td colspan="4"><hr></td>
  </tr>
</tbody>
<tfoot>
  <tr align="center" bgcolor="#00CCFF">
    <th colspan="1" align="right">&nbsp;</th>
    <td class="total"></td>
    <td class="total"></td>
    <td class="total"></td>
  </tr>
</tfoot>
</table>
</body>
</html>

Bonjour

Exemple :

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
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://d3js.org/d3.v3.min.js",
			"http://code.jquery.com/jquery-2.1.0-beta1.js",
			//"http://code.jquery.com/jquery-2.0.3.min.js",
			//"http://code.jquery.com/jquery-1.10.2.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/d3Base.js", function(){
 
$( function(){
 
	var total = 0,
		sousTotal = 0,
		jObjTotal = $( "#data tfoot th:eq(0)" ),
		jObjTbodyTr = $( "#data tbody tr" );
 
	$( "#data tfoot th.total" ).each( function( i, item ){
		sousTotal = 0;
 
		jObjTbodyTr.each( function( j, jtem ){			
			sousTotal += parseFloat( $( "td.sum:eq( " + i + " )", jtem ).text() ) || 0;
		});
 
		$( item ).text( sousTotal );
		jObjTotal.text( ( total += sousTotal ) );
	});
 
});
 
$( window ).load( function(){
 
});
 
		});
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 10 px, voir dvjhRemBase.css */
 
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
<table border="1" width="500" id="data">
	<thead>
		<tr align="center">
		    <th>Name</th>
		    <th>Age</th>
		    <th>Weight</th>
		    <th>Number</th>
		</tr>
	</thead>
	<tfoot>
		<tr align="center">
		    <th ></th>
		    <th class="total"></td>
		    <th class="total"></td>
		    <th class="total"></td>
		</tr>
	</tfoot>
	<tbody>
		<tr align="center">
			<td>Joe</td>
			<td class="sum">1</td>
			<td class="sum">200</td>
			<td class="sum">1</td>
		</tr>
		<tr align="center">
			<td>Jack</td>
			<td class="sum">29</td>
			<td class="sum">100</td>
			<td class="sum">1</td>
		</tr>
		<tr>
			<td colspan="4"><hr></td>
	  	</tr>
	</tbody>
</table>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="22013-10-31T16:01:57.880+01:00" pubdate>2013-10-31T16:01:57.880+01:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

Bonjour et merci pour ton aide,

Je suis désolé de répondre si tard je n'ai pas vu la réponse.:aie:

Ta fonction marche très bien et je t'en remercie, mais en voulant simplifier mon code, j'ai oublié l'essentiel.

En fait j'utilise TABLESORTER pour trier et surtout filtrer mon tableau or je voudrais que la somme se modifie si la colonne a été filtrée...

D'après mes lectures se sera possible dans la version 3 de TABLSORTER, mais d'ici là, si tu as une idée je veux bien car ça dépasse totalement mes compétences.

Merci d'avance

Ci-dessous ton code intégré sur mon tableau avec le plugin TABLE SORTER :

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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
 
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<title>Forum jQuery</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
 
	<!-- Tablesorter: required -->
	<link rel="stylesheet" href="tablesorter/css/theme.blue.css">
	<script src="tablesorter/js/jquery.tablesorter.js"></script>
	<script src="tablesorter/js/jquery.tablesorter.widgets.js"></script>
 
 
	<script type="text/javascript">
$(function() {
	$("table").tablesorter({
		theme: 'blue',
 
		widthFixed : true,
 
		widgets: ["zebra", "filter"],
 
		widgetOptions : {
 
			filter_cssFilter   : 'tablesorter-filter',
 
			filter_childRows   : false,
 
			filter_hideFilters : false,
 
			filter_ignoreCase  : true,
 
			filter_reset : '.reset',
 
			filter_searchDelay : 300,
 
			filter_startsWith  : false,
 
			filter_hideFilters : false,
 
			filter_functions : {
				// 0 : true,
 
				1 : true,
 
				3 : true,
 
				2 : {
				    "< 200"      : function(e, n, f, i) { return n <=200; },
					"50 - 100" : function(e, n, f, i) { return n >= 50 && n <=100; },
					"0 - 50" : function(e, n, f, i) { return n >= 0 && n <=50; },
				}
			}
		}
	});
});
 
 
 
head.js( 
	"http://code.jquery.com/jquery-2.1.0-beta1.js", function(){
 
$( function(){
 
	var total = 0,
		sousTotal = 0,
		jObjTotal = $( "#data tfoot th:eq(0)" ),
		jObjTbodyTr = $( "#data tbody tr" );
 
	$( "#data tfoot th.total" ).each( function( i, item ){
		sousTotal = 0;
 
		jObjTbodyTr.each( function( j, jtem ){			
			sousTotal += parseFloat( $( "td.sum:eq( " + i + " )", jtem ).text() ) || 0;
		});
 
		$( item ).text( sousTotal );
		jObjTotal.text( ( total += sousTotal ) );
	});
 
});
 
	$( window ).load( function(){
 
	});
 
});
</script>
</head>
<body>
 
<table border="1" width="500" class="tablesorter" id="data">
	<thead>
		<tr align="center">
		    <th>Name</th>
		    <th>Age</th>
		    <th>Weight</th>
		    <th>Number</th>
		</tr>
	</thead>
	<tfoot>
		<tr align="center">
		    <th ></th>
		    <th class="total"></th>
		    <th class="total"></th>
		    <th class="total"></th>
		</tr>
	</tfoot>
	<tbody>
		<tr align="center">
			<td>Joe</td>
			<td class="sum">11</td>
			<td class="sum">200</td>
			<td class="sum">1</td>
		</tr>
		<tr align="center">
			<td>Jack</td>
			<td class="sum">29</td>
			<td class="sum">100</td>
			<td class="sum">1</td>
		</tr>
        <tr align="center">
			<td>Jim</td>
			<td class="sum">32</td>
			<td class="sum">50</td>
			<td class="sum">2</td>
		</tr>
		<tr align="center">
			<td>John</td>
			<td class="sum">15</td>
			<td class="sum">25</td>
			<td class="sum">1</td>
		</tr>
	</tbody>
</table>
</body>
</html>

Salut

Attention, à votre code ! Vous utilisez une version totalement obsolète de jQuery.

Dans mes pages web, j'utilise le chargeur de scripts head.js. Vous n'êtes pas obligé de l'utiliser, dans ce cas recopier uniquement le contenu du document ready (voir la FAQ jQuery).

Les totaux ne sont pas modifiés par le filtrage, exemple utilisant le plugin "tablesorter" avec des sous totaux sur les colonnes et les lignes de la table.

Pour trier une colonne, en ascendant ou en descendant, il suffit de cliquer sur le titre de cette colonne.

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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery, DVP</title>
    <!--<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>-->
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
/*
 * Emplacement du code Google map.
 * Ne fonctionne pas dans le chargeur de code.
 */
 
		head.js( 
			"http://d3js.org/d3.v3.min.js",
			"http://code.jquery.com/jquery-2.1.0-beta1.js",
			//"http://code.jquery.com/jquery-2.0.3.min.js",
			//"http://code.jquery.com/jquery-1.10.2.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
			"http://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.10.8/jquery.tablesorter.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/d3Base.js", function(){
 
$( function(){
 
	var total = 0,
		sousTotalC = 0,
		sousTotalR = 0,
		jObjTotal = $( "#data tfoot th:last" ),
		jObjTbodyTr = $( "#data tbody tr" );
 
	$( "#data tfoot th.sousTotal" ).each( function( i, item ){ // for each th
		sousTotalC = 0;
 
		jObjTbodyTr.each( function( j, jtem ){ // for each tr
			sousTotalC += parseFloat( $( "td.sum:eq( " + i + " )", jtem ).text() ) || 0;
 
			sousTotalR = 0;
 
			$( "td.sum", jtem ).each( function( k, ktem ){ // for each td.sum
				sousTotalR += parseFloat( $( ktem ).text() ) || 0;				
			});
 
			$( "td:last", jtem ).text( sousTotalR );
		});
 
		$( item ).text( sousTotalC );
		jObjTotal.text( ( total += sousTotalC ) );
	});
 
	$( "#data" ).tablesorter();
 
});
 
$( window ).load( function(){
 
});
		});			
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 10 px, voir dvjhRemBase.css */
 
#data { width: 600px; margin: 24px; }
 
/* tables */
table.tablesorter {
	font-family:arial;
	background-color: #CDCDCD;
	margin:10px 0pt 15px;
	font-size: 8pt;
	width: 100%;
	text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
	background-color: #e6EEEE;
	border: 1px solid #FFF;
	font-size: 8pt;
	padding: 4px;
}
table.tablesorter thead tr .header {
	background-image: url('http://danielhagnoul.developpez.com/images/bg.gif');
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
}
table.tablesorter tbody td {
	color: #3D3D3D;
	padding: 4px;
	background-color: #FFF;
	vertical-align: top;
}
table.tablesorter tbody tr.odd td {
	background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
	background-image: url('http://danielhagnoul.developpez.com/images/asc.gif');
}
table.tablesorter thead tr .headerSortDown {
	background-image: url('http://danielhagnoul.developpez.com/images/desc.gif');
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
	background-color: #8dbdd8;
}
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
<table id="data">
	<thead>
		<tr align="center">
		    <th>Name</th>
		    <th>Age</th>
		    <th>Weight</th>
		    <th>Number</th>
		    <th>Total</th>
		</tr>
	</thead>
	<tfoot>
		<tr align="center">
		    <th>&nbsp;</th>
		    <th class="sousTotal"></th>
		    <th class="sousTotal"></th>
		    <th class="sousTotal"></th>
			<th></th>
		</tr>
	</tfoot>
	<tbody>
		<tr align="center">
			<td>Joe</td>
			<td class="sum">11</td>
			<td class="sum">200</td>
			<td class="sum">1</td>
			<td></td>
		</tr>
		<tr align="center">
			<td>Jack</td>
			<td class="sum">29</td>
			<td class="sum">100</td>
			<td class="sum">1</td>
			<td></td>
		</tr>
        <tr align="center">
			<td>Jim</td>
			<td class="sum">32</td>
			<td class="sum">50</td>
			<td class="sum">2</td>
			<td></td>
		</tr>
		<tr align="center">
			<td>John</td>
			<td class="sum">15</td>
			<td class="sum">25</td>
			<td class="sum">1</td>
			<td></td>
		</tr>
	</tbody>
</table>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-11-04T15:32:23.393+01:00" pubdate>2013-11-04T15:32:23.393+01:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

04/11/2013, 18h11
bibeu

Merci de prendre du temps pour m'aider,

J'ai bien compris en ce qui concerne la version de jquery, mais ce que souhaite faire avant tout c'est justement pourvoir utiliser les filtres (grâce à tablesorter) dans mon tableau et que les totaux se recalculent !

Je ne sais si c'est possible mais merci d'avance pour ta réponse.

Les valeurs dans la table ne changent pas, donc les totaux ne changent pas, c'est seulement l'affichage qui se modifie en fonction des options de tri et du tri. Je ne comprends pas ce que vous voulez en plus par rapport à mon dernier exemple.

Vous pouvez toujours mettre le code dans une fonction et l'appeler en cas de besoin :

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
function calcul(){
	var total = 0,
		sousTotalC = 0,
		sousTotalR = 0,
		jObjTotal = $( "#data tfoot th:last" ),
		jObjTbodyTr = $( "#data tbody tr" );
 
	$( "#data tfoot th.sousTotal" ).each( function( i, item ){ // for each th
		sousTotalC = 0;
 
		jObjTbodyTr.each( function( j, jtem ){ // for each tr
			sousTotalC += parseFloat( $( "td.sum:eq( " + i + " )", jtem ).text() ) || 0;
 
			sousTotalR = 0;
 
			$( "td.sum", jtem ).each( function( k, ktem ){ // for each td.sum
				sousTotalR += parseFloat( $( ktem ).text() ) || 0;				
			});
 
			$( "td:last", jtem ).text( sousTotalR );
		});
 
		$( item ).text( sousTotalC );
		jObjTotal.text( ( total += sousTotalC ) );
	});
}
 
calcul();

05/11/2013, 14h59
bibeu

Merci pour ta patience,

Dans ton exemple il n'y a pas de filtre donc, toujours le même nombre de lignes, alors que moi je veux des filtres donc le nombre de lignes varient selon le filtre sélectionné.

Dans mon code plus haut il y a bien les filtres, exemple : les lignes comprises entre 50 et 100 de la colonne "Age" et je fais ça grâce au plugin tablesorter.

Mais si je demande les lignes comprises entre 50 et 100 de la colonne "age" le total reste le même, donc il est faux.

Je pourrais mettre ton code dans une fonction comme proposé, mais je ne sais pas non plus comment et ou faire l'appel à cette fonction.

Si tu as une autre idée je suis toujours preneur, sinon je le ferais en php/sql, mais c'est moins agréable pour l'utilisateur.

merci,