Graphique en barre

Version imprimable

08/08/2017, 10h49
TheoFoug

Graphique en barre

Bonjour,

Je débute totalement dans JavaScript et j'aurais besoin d'un conseil pour une direction a prendre au sujet de jQuery.

Le but est de remplacer un tableau HTML de 4 cases par cette barre.
Si vous savez comme on nomme se genre de truc ca m'aiderais aussi.
08/08/2017, 11h28
NoSmoking

Bonjour,

Citation:

Est il possible de le faire avec Jquery UI ?

rien à voir avec jQuery ou javascript en règle générale mais avec le HTML/CSS.

Regarde du coté de display:flex à mettre sur le conteneur, <div> par exemple, mais cela va dépendre de ce que tu cherches à réaliser au final.
08/08/2017, 12h06
TheoFoug

Le but est de modifier le tableau HTML coté client mais sans le modifier, donc forcement c'est du JS ?
08/08/2017, 12h13
NoSmoking

Citation:

Le but est de modifier le tableau HTML coté client mais sans le modifier ...

le moins que l'on puisse dire est que cela n'est pas bien clair :aie:

J'en conclu que tu cherches à ajouter une cellule en fin de ta ligne, il existe de nombreuses méthodes dans la Category: Manipulation.
08/08/2017, 12h25
TheoFoug

Ouais ... transformer le tableau HTML avec Javascript pour y remplacer plusieurs cellules par un graphique. Un par ligne.
Mon soucis c'est surtout au niveau du desssin.

J'aimerais eviter les plugins qui surcharge jQuery, et savoir si il est possible de faire ca avec jQuery, ou jQueryUI en version native.
08/08/2017, 18h13
NoSmoking

J'ai du mal à visualiser la finalité de ce que tu cherches à faire :oops:

Pourrais-tu nous mettre le code HTML de départ et nous dire ce que tu veux « transformer ».

Citation:

J'aimerais eviter les plugins qui surcharge jQuery, et savoir si il est possible de faire ca avec jQuery, ou jQueryUI en version native.

Cela ne veux pas dire grand chose !!

Tu a raison concernant HTML/CSS, mais j'ai un peu de mal concernant JavaScript.
Il suffit de récupérer des cellules et de les remplacer par un conteneur avec des div.

Voici la source :

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
<table id="table">
	<body>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>9</td>
			<td>6</td>
			<td>11</td>
			<td>2</td>
			<td>3</td>
		</tr>
		<tr>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>9</td>
			<td>10</td>
			<td>3</td>
			<td>7</td>
		</tr>
		<tr>
			<td>5</td>
			<td>6</td>
			<td>6</td>
			<td>9</td>
			<td>5</td>
			<td>3</td>
			<td>1</td>
		</tr>
	</tbody>
</table>

Et le but :

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
<table id="table">
	<body>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>
				<div class="content">
					<div class="un">9</div>
					<div class="deux">6</div>
					<div class="trois">11</div>
				</div>
			</td>
			<td>2</td>
			<td>3</td>
		</tr>
		<tr>
			<td>5</td>
			<td>6</td>
			<td>
				<div class="content">
					<div class="un">7</div>
					<div class="deux">9</div>
					<div class="trois">10</div>
				</div>
			</td>
			<td>3</td>
			<td>7</td>
		</tr>
		<tr>
			<td>5</td>
			<td>6</td>
			<td>
				<div class="content">
					<div class="un">6</div>
					<div class="deux">9</div>
					<div class="trois">5</div>
				</div>
			</td>
			<td>3</td>
			<td>1</td>
		</tr>
	</tbody>
</table>

Pour le moment j'essaye d'obtenir le contenu des cellules :

Code:

1
2
3
4
5
	var valeur = 0;
	$('#table tbody tr').each(function() {
		valeur = $('this:nth-child(3)').text();
		console.log(valeur);
	})

Mais ca ne fonctionne pas ... je continu.

Pour commencer
Code:

1 2 <table id="table"> <body> 
non, il faut écrire
Code:

1 2 <table id="table"> <tbody>
Si ce que tu souhaites c'est récupérer le contenu des cellules 3,4 et 5 et de mettre leur contenu dans la même cellule, la 3éme, il te faut penser à mettre un colspan="3" sur cette cellule et également penser à supprimer les cellules 4 et 5.

Pour la lecture tu peux faire
Code:

1 2 3 4 5 6 7 8 $('#table tr').each(function () { var txt = ''; var oTds = $(this).find('td'); txt += oTds.eq(2).text() + ' -'; txt += oTds.eq(3).text() + ' -'; txt += oTds.eq(4).text(); console.log(txt); });