2

Actualmente sólo genero los colores aleatoriamente pero no se como repetir el color para un grupo de un mismo número.

Lo que llevo:

$(document).ready(function() {
  $("#tabla").append(tabla());
});

function tabla() {
  var procesos = "<table class='table table-hover'><tr><th>Nombre</th><th>Tiempo Teórico</th></tr>";
  var texto = "";
  $(datos).each(function(i, j) {
    var fondo = random_color('hex');
    var frente = invertColor(fondo);
    procesos += "<tr style='background-color: " + fondo + "; color: " + frente + ";'>";
    procesos += "<td>" + j.p + "</td>";
    procesos += "<td>" + j.tiempo_teorico + "</td>";
    procesos += "</tr>";
  });
  procesos += "</table>";
  return procesos;
};

var datos = [{
    "p": "Mezcla",
    "tiempo_teorico": "8:25:02",
    "grupo": 1
  },
  {
    "p": "Fileteado Jeje",
    "tiempo_teorico": "16:50:05",
    "grupo": 0
  },
  {
    "p": "Llenado",
    "tiempo_teorico": "1:40:05",
    "grupo": 2
  },
  {
    "p": "Vaciado",
    "tiempo_teorico": "9:02:00",
    "grupo": 1
  }
];

function random_color(format) {
  var rint = Math.floor(0x100000000 * Math.random());
  switch (format) {
    case 'hex':
      return '#' + ('00000' + rint.toString(16)).slice(-6).toUpperCase();
    case 'hexa':
      return '#' + ('0000000' + rint.toString(16)).slice(-8).toUpperCase();
    case 'rgb':
      return 'rgb(' + (rint & 255) + ',' + (rint >> 8 & 255) + ',' + (rint >> 16 & 255) + ')';
    case 'rgba':
      return 'rgba(' + (rint & 255) + ',' + (rint >> 8 & 255) + ',' + (rint >> 16 & 255) + ',' + (rint >> 24 & 255) / 255 + ')';
    default:
      return rint;
  }
}

function invertColor(hexTripletColor) {
  var color = hexTripletColor;
  color = color.substring(1); // remove #
  color = parseInt(color, 16); // convert to integer
  color = 0xFFFFFF ^ color; // invert three bytes
  color = color.toString(16); // convert to hex
  color = ("000000" + color).slice(-6); // pad with leading zeros
  color = "#" + color; // prepend #
  return color;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

<div class="col-sm-6 col-xs-10" id="tabla"></div>

Resultado esperado:

Como en el ejemplo que coloco, Mezcla y Vaciado pertenecen al mismo grupo (1), deberían de tener el mismo color de fondo.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

<div class="col-sm-6 col-xs-10" id="tabla">
  <table class='table table-hover'>
    <tr>
      <th>Nombre</th>
      <th>Tiempo Teórico</th>
    </tr>
    <tr style='background-color: #E47C88; color: #1b8377;'>
      <td>Mezcla</td>
      <td>8:25:02</td>
    </tr>
    <tr style='background-color: #CC582F; color: #33a7d0;'>
      <td>Fileteado Jeje</td>
      <td>16:50:05</td>
    </tr>
    <tr style='background-color: #808E85; color: #7f717a;'>
      <td>Llenado</td>
      <td>1:40:05</td>
    </tr>
    <tr style='background-color: #E47C88; color: #1b8377;'>
      <td>Vaciado</td>
      <td>9:02:00</td>
    </tr>
  </table>
</div>

1 respuesta 1

5

Puedes generar los colores aleatorios e insertarlos en un Array (dependiendo del número de grupos que tengas) y después usar dichos colores tomando como index del Array el grupo de cada una de las filas. Aquí te dejo un ejemplo para que entiendas el concepto:

var datos = [
  {
    "p": "Mezcla",
    "tiempo_teorico": "8:25:02",
    "grupo": 1
  },
  {
    "p": "Fileteado Jeje",
    "tiempo_teorico": "16:50:05",
    "grupo": 0
  },
  {
    "p": "Llenado",
    "tiempo_teorico": "1:40:05",
    "grupo": 2
  },
  {
    "p": "Vaciado",
    "tiempo_teorico": "9:02:00",
    "grupo": 1
  }
];

// Generar un color
function grc () {
  var hex = (Math.floor((Math.random() * 255))).toString(16);
  var ceros = "00";
  return ceros.slice(0, -hex.length) + hex;
}

// Generar un color RGB
function getRandomHex () {
  return "#" + grc() + grc() + grc();
}

// Generar los colores del array
function getColors () {

  var array = [];
  
  for (var i = 0; i < 50; i++) {
    array[i] = getRandomHex();
  }
  
  return array;

}

// Insertar las filas
var colors = getColors();
var container = $("#container tbody");

datos.forEach(function (item) {

  var row = $("<tr/>");
  var td1 = $("<td/>");
  var td2 = $("<td/>");
  
  row.css({"background": colors[item.grupo], "color": colors[item.grupo]});
    
  td1.html("<span>" + item.p + "</span>");
  td2.html("<span>" + item.tiempo_teorico + "</span>");  
  
  row.append(td1, td2);
  container.append(row);

});
#container {
  font-family: Arial;
  font-size: 12px;
  text-align: left;
  width: 100%;
}

#container tr {
  height: 30px;
}

#container td {
  padding: 5px;
}

#container tr span {
  -webkit-filter: invert(100%);
  -moz-filter: invert(100%);
  -o-filter: invert(100%);
  -ms-filter: invert(100%);
  filter: invert(100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="container">
  <thead>
    <th>Nombre</th>
    <th>Tiempo teórico</th>
  </thead>
  <tbody>
  </tbody>
</table>

2
  • sencillo y da la solución exacta! gracias hermano!
    – bypabloc_
    el 6 abr. 2017 a las 2:20
  • De nada amigo. Me alegro que te haya sido de ayuda. Un saludo.
    – ElChiniNet
    el 6 abr. 2017 a las 5:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.