Modificare css in base al contenuto

**xxmgaxx** · 07-03-2017, 18:53

Buongiorno a tutti,
vi espongo il mio problema ho un tabella, ho una tabella con all'interno una serie di percentuali, 0% 43% 81% ecc, devo colorare ogni singola cella in base a questa percentuale se compresa fra 0%e 10% un colore 11% 34% un'altro ecc ecc.
Mi sono arenato vorrei evitare, di creare un mega array per ogni singola percentuale
Grazie per l'aiuto

**badaze** · 09-03-2017, 00:46

Prova questo.

Codice PHP:


<html>
<head>
<script>
function colora() {
 var t = document.getElementById('pippo');
 
 var tb = t.children;
 for (var h=0;h<tb.length;h++) {
  var tr = tb[h].children;
  for (var i=0;i<tr.length;i++) {
   var td = tr[i].children;
   for (var j=0;j<td.length;j++) {
    var val = parseInt(td[j].innerText);
    if (val <= 10) {
     td[j].style.backgroundColor = 'red';
    } else {
     if (val <= 34) {
      td[j].style.backgroundColor = 'orange';
     } else {
      if (val <= 84) {
       td[j].style.backgroundColor = 'green';
      } else {
       td[j].style.backgroundColor = 'yellow';
      }
     }
    
    }
   }
  }
 }
}
</script>
</head>
<body onload="colora()">
<table id="pippo">
 <tr>
  <td>15</td><td>20</td><td>44<td><td>88</td>
 </tr>
 <tr>
  <td>55</td><td>11</td><td>99<td><td>3</td>
 </tr> 
</table>
</body>
</html>

**badaze** · 09-03-2017, 01:06

Versione con i CSS.

Codice PHP:


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<!--
.p00_10  {background-color:red;font-family:verdana}
.p11_34  {background-color:orange}
.p35_84  {background-color:green}
.p85_100 {background-color:yellow}
-->
</style>
<script>
function colora() {
 var t = document.getElementById('pippo');
 
 var tb = t.children;
 for (var h=0;h<tb.length;h++) {
  var tr = tb[h].children;
  for (var i=0;i<tr.length;i++) {
   var td = tr[i].children;
   for (var j=0;j<td.length;j++) {
    var val = parseInt(td[j].innerText);
    if (val <= 10) {
     td[j].className = "p00_10";
    } else {
     if (val <= 34) {
      td[j].className = "p11_34";
     } else {
      if (val <= 84) {
       td[j].className = "p35_84";
      } else {
       td[j].className = "p85_100";
      }
     }
    }
   }
  }
 }
}
</script>
</head>
<body onload="colora()">
<table id="pippo">
 <tr>
  <td>15</td><td>20</td><td>44<td><td>88</td>
 </tr>
 <tr>
  <td>55</td><td>11</td><td>99<td><td>3</td>
 </tr> 
</table>
</body>
</html>

**xxmgaxx** · 09-03-2017, 14:17

Grazie per l'interesse ma ho risolto in questo modo

codice:

	var coloreA="green";
			var percentualeA=0;

			var percentualeA1=70;
			

			var coloreB="yellow";

			var percentualeB=71;
			var percentualeB1=99;
			
			var coloreC="red";
			var percentualeC=100;
			var percentualeC1=1000;

			

			var myArray=[
						 [coloreA,percentualeA,percentualeA1],
						 [coloreB,percentualeB,percentualeB1],
						 [coloreC,percentualeC,percentualeC1]
						 ];
			

			var num;

			var mTabellaB = $("table > tbody > tr > td.ms-cellstyle").parent().parent().parent();
			var $index = $('table > thead > tr > th.ms-vh2:contains(% Percentuale)').index()+1;


			for (i = 0; i < myArray.length; i++) { 

			var $Text =$(" > tbody > tr > td:nth-child("+$index+")" ,

			mTabellaB ).filter(function() {
			// Get the number and convert it to Number
			num = +($(this).text().split('%',1));
			return num >= myArray[i][1] && num <= myArray[i][2] ;
			}).parent().children().css("color", myArray[i][0]);
			}

var coloreA="green";
var percentualeA=0;
var percentualeA1=70;

var coloreB="yellow";
var percentualeB=71;
var percentualeB1=99;

var coloreC="red";
var percentualeC=100;
var percentualeC1=1000;

var myArray=[
[coloreA,percentualeA,percentualeA1],
[coloreB,percentualeB,percentualeB1],
[coloreC,percentualeC,percentualeC1]
];

var num;
var mTabellaB = $("table > tbody > tr > td.ms-cellstyle").parent().parent().parent();
var $index = $('table > thead > tr > th.ms-vh2:contains(% Percentuale)').index()+1;

for (i = 0; i < myArray.length; i++) {
var $Text =$(" > tbody > tr > td:nth-child("+$index+")" ,
mTabellaB ).filter(function() {
// Get the number and convert it to Number
num = +($(this).text().split('%',1));
return num >= myArray[i][1] && num <= myArray[i][2] ;
}).parent().children().css("color", myArray[i][0]);
}

var $index=$('table th.ms-vh2:contains(Obiettivo)').index()-1;
var $Text =$("tr").find("td.ms-cellstyle.ms-vb2:eq("+$index+")");
$Text.css("color", "RED",'important');
}

Discussione: Modificare css in base al contenuto

Strumenti discussione

Ricerca discussione

Visualizza

Modificare css in base al contenuto

Permessi di invio