Réaliser un tableau avec des couleurs

Résolu
monman Messages postés 11 Date d'inscription   Statut Membre Dernière intervention   -  
monman Messages postés 11 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,
je souhaite réalisé une matrice de risque c'est a dire un tableau avec des couleur et un pointeur qui se déplace selon une valeur précise dans le tableau ,j'ai besoin d' un plugin
ou une idée qui peut réaliser l'affaire
merci d'avance
A voir également:

8 réponses

prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
Tu peux nous faire un schéma de ce que tu souhaites ? Comment se déplace ton pointeur ? selon quelles valeurs ?

Essaie d'être le plus précis pour qu'on puisse élaborer une solutions qui répondra à tes besoins.
0
monman Messages postés 11 Date d'inscription   Statut Membre Dernière intervention  
 
merci pour votre réponse
en fait ça ressemble a http://mod4x4.com/wp-content/uploads/2012/08/tableau12-1024x271.jpg
dans l'application je calcule 2 nombre qui m'indique la position dans le tableau (comme i et j dans une matrice ), et un indicateur (qui peut être un point ou autre chose) indique la position dans le tableau
0
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
Par exemple, si je rentre les valeurs [Probalitié: 3, Gravité 1], il faudrait que le pointeur retourne 4 et que la case correspondant soit sélectionnée ou soit mise en évidence par rapport aux autres ?

Comment souhaiterais-tu entrer les valeurs nominales ? (Via des champs textes ou listes déroulantes, à partir de données externes, ... ?)
0
monman Messages postés 11 Date d'inscription   Statut Membre Dernière intervention  
 
oui c 'est ça et qu'un pointeur ce place dans la case (i,j) , et si i et j le pointeur change de position dans les cellule , pour les valeurs je calcule les valeurs et je les stocke dans la base de donnée , donc c'est a partir d'une table
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
Ok, je m'y met, tu reste à l'écoute un moment ?
0
monman Messages postés 11 Date d'inscription   Statut Membre Dernière intervention  
 
ok , merci bcp
0
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
Voila un script:

<html>
	<head>
		<title></title>
		<meta charset="utf-8">
		<style type="text/css">
			.pond{
				width: 60px;
				height: 30px;
				text-align: center;	
			}
			.pond0{
				background-color: lightgreen;
			}
			.pond1, .pond2, .pond3{
				background-color: green;
			}
			.pond5, .pond4{
				background-color: yellow;
			}
			.pond6, .pond7{
				background-color: orange;
			}
			.pond8, .pond9{
				background-color: red;
			}
			.pond10{
				background-color: darkred;
			}
			.gravite td{text-align: center;}
		</style>
	</head>
	<body>
		<div id="global">
		</div>
		<input type="text" id="prob" placeholder="probabilité" />
		<input type="text" id="grav" placeholder="gravité" />
		<button onclick="matrice.setCase();">valider</button>
	</body>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script type="text/javascript">
		var matrice = {
			active: null,
			element: null,
			_initialize: function(){
				var element = '<table>';
					element += '<tr><td><b>Probabilité</b></td></tr>';
				for(var i = 5; i >= 0;i--){
					var nb = i;
					element += '<tr>';
					element += '<td class="entry">'+i+'</td>';
					for(var j = 0; j <= 5; j++){
						element += '<td class="pond pond'+nb+'" id="index'+i+''+j+'">'+nb+'</td>';
						nb++;
					}
					element += '</tr>';
				}
				element += '</tr><tr class="gravite"><td></td>';
				for(var i = 0; i < 6; i++){
					element += '<td>'+i+'</td>';
				}
				element += '</tr><tr class="gravite"><td></td><td colspan="6"><b>Gravité</b></td>';
				element += '</table>';
				var $element = $(element);
				$('#global').append($element);
				this.element = $element;
			},
			setCase: function(){
				$('.pond').css('color', 'black').css('box-shadow', 'none');
				var prob = document.getElementById('prob').value;
				var grav = document.getElementById('grav').value;
				var id = 'index' + prob + grav;
				$('#'+id).css('color', 'white').css('box-shadow', 'inset 0 0 5px black');
			}
		}
		matrice._initialize();
	</script>
</html>


Si il te convient il faudra voir comment setter la probabilité et la gravité depuis les infos de ta BDD.
0
monman Messages postés 11 Date d'inscription   Statut Membre Dernière intervention  
 
c'est ce que je cherche, merci bcp pour ton effort et pour l'intérêt a mon sujet :D et j'espère que ça aide d'autre personne :D
0
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
De rien, ca m'a occupé les doigts en cette longue soirée d'hiver :p Bonne soirée (Tu peux passer le sujet en résolu stp?)
0
monman Messages postés 11 Date d'inscription   Statut Membre Dernière intervention  
 
c fait ;)
0