Graphique en barre

**TheoFoug** · 08/08/2017, 10h49

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.

**NoSmoking** · 08/08/2017, 11h28

Bonjour,

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.

**TheoFoug** · 08/08/2017, 12h06

Le but est de modifier le tableau HTML coté client mais sans le modifier, donc forcement c'est du JS ?

**NoSmoking** · 08/08/2017, 12h13

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

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

**TheoFoug** · 08/08/2017, 12h25

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.

**NoSmoking** · 08/08/2017, 18h13

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

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

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 !!

**TheoFoug** · 09/08/2017, 12h03

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 html :

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
<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 html :

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
<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 :

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

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.

**NoSmoking** · 09/08/2017, 13h50

Pour commencer

Code html :

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

1
2
<table id="table">
	<body> <!-- mauvaise balise -->

non, il faut écrire

Code html :

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

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 :

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

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);
});

Graphique en barre [UI]

jQuery

Discussions similaires

Partager

Partager