2

busco aplicar solamente por CSS puro un fondo de color a una etiqueta especifica <tr> en la siguiente tabla, se diferencia según el contenido, en este caso, el contenido se debe aplicar únicamente a las <tr> que están en mayúsculas:

<table>
 <thead>
 </thead>
 <tbody>
  <tr>
   <th>ALL AVIALABLE METALS</th>
   <td></td>
  </tr>
  <tr class="alt">
   <th>Rose Gold</th>
   <td>
    <p>14Kt, 18Kt</p>
   </td>
  </tr>
  <tr class="">
   <th>White Gold</th>
   <td>
    <p>14Kt, 18Kt</p>
   </td>
  </tr>
  <tr class="alt">
   <th>Yellow Gold</th>
   <td>
    <p>14Kt, 18Kt</p>
   </td>
  </tr>
  <tr class="">
   <th>OTHER INFORMATION</th>
   <td></td>
  </tr>
  <tr class="alt">
   <th>Finish Type</th>
   <td>
    <p>Polished</p>
   </td>
  </tr>
  <tr class="">
   <th>Width Bottom</th>
   <td>
    <p>2.1mm</p>
   </td>
  </tr>
</tbody>

De esta manera es exactamente como se imprime en PHP ya qué es más fácil administrar los estilos desde un tema hijo en una plantilla he optado por la alternativa planteada anteriormente.

El código final debe asignar los siguientes estilos a las <tr> con mayúsculas:

background-color: #dfe6e9;
font-weight: bold;

¿Es posible ese método? Gracias.

6
  • 1
    Si tu mismo diferencias el contenido de la tabla, porque no a cada tr que tienes le asignas una clase especifica?.. Cargas la tabla de una forma dinamica?
    – sioesi
    Commented el 19 oct. 2016 a las 18:11
  • Pues mirá, es un modulo de WordPress Woocommerce, imprime las tablas según la información característica de cada producto ingresado, este no diferencia de cabeceras. La única forma de diferenciar las cabeceras en su impresión es escribiendolas en mayúsculas. Por eso pretendo agregar un estilo a las <tr> con contenido uppercase. atributo de CSS
    – user18839
    Commented el 19 oct. 2016 a las 18:28
  • Me imagino que hace una consulta a la base de datos y va por un foreach o algo asi dibujando la tabla? puedes dejar ese codigo??
    – sioesi
    Commented el 19 oct. 2016 a las 18:30
  • Si claro, hace una consulta a la base de datos. Mi conocimiento en PHP no es lo bastante amplio, solo HTML y CSS de momento.
    – user18839
    Commented el 19 oct. 2016 a las 18:33
  • Es dificil dar una respuesta sin ver tu codigo php (que es como hasta ahora lo haces)
    – sioesi
    Commented el 19 oct. 2016 a las 18:38

2 respuestas 2

3

Como te comente, es dificil dar una respuesta optima sin ver tu situacion actual, pero me puedo imaginar algo asi :

Inventando que la propiedad que necesitas ver distinta es Nombre

.nombre{
    background-color: #dfe6e9;
    font-weight: bold;
}

<?php
    foreach ($datos as $valor) { ?>
       <tr>
        <? if(preg_match_all('/[A-Z]/', $valor['Nombre'])){ ?>
           <td class="nombre"><?=$valor['Nombre'];?></td>
        <? } else {?>
           <td><?=$valor['Nombre'];?></td>
        <? }?>
        <td><?=$valor['Value'];?></td>
       </tr>
<? } ?>
2
  • Excelente respuesta, ya que va al origen del problema y no intenta un parche del lado del cliente... Viendo el origen de datos, también hay columnas en minúsculas. Quizás podrías mostrar cómo imprimir de ambas formas (si está en mayúsculas o no)
    – Mariano
    Commented el 20 oct. 2016 a las 0:27
  • Gracias @Mariano, editado!
    – sioesi
    Commented el 20 oct. 2016 a las 11:47
1

No es posible dar estilo a elementos basado en su contenido con CSS, a excepción de la pseudoclase :empty, que en tu caso no nos ayudará.


¿Qué tal si utilizas vanilla Javascript?

Primero creas una simple función que cheque si el texto dentro de tu elemento <th> está en puras mayúsculas:

 function todasMayusculas(str) {
   return str.toUpperCase() == str;
 }

Esta función te regresará un booleano, ya sea true o false.

¿De qué nos servirá esto?

Puedes recorrer el DOM en busca de elementos <th> ya sea con:

document.querySelectorAll("th") o document.getElementsByTagName("th")

document.querySelectorAll() ~ document.getElementsByTagName()

Esto te regresará una lista de nodos, si es que encontró resultados, la cual puedes iterar:

var th = document.querySelectorAll("th");

for (var i = 0; i < th.length; i++) {
    ...
}

Después utilizas la función que creaste por cada elemento dentro de la lista.

Como dicha función está esperando una cadena (string) utilizaremos textContent, el cual nos retorna el texto dentro el elemento.

Si el resultado de todasMayusculas() nos arroja true, le agregas una clase de tu elección, en este caso se llamará seleccionado:

for (var i = 0; i < th.length; i++) {
    if (todasMayusculas(th[i].textContent)) {
      th[i].classList.add("seleccionado");
    }
}

Finalmente, agregas esta clase a tu archivo CSS con las propiedades deseadas:

.seleccionado {
  background-color: #dfe6e9;
  font-weight: bold;
}

Juntamos todo y queda así:

(function() {
  var th = document.querySelectorAll("th");

  for (var i = 0; i < th.length; i++) {
    if (todasMayusculas(th[i].textContent)) {
      th[i].classList.add("seleccionado");
    }
  }

  function todasMayusculas(str) {
    return str.toUpperCase() == str;
  }
})();
.seleccionado {
  background-color: #dfe6e9;
  font-weight: bold;
}
<table>
  <thead>
  </thead>
  <tbody>
    <tr>
      <th>ALL AVAILABLE METALS</th>
      <td></td>
    </tr>
    <tr class="alt">
      <th>Rose Gold</th>
      <td>
        <p>14Kt, 18Kt</p>
      </td>
    </tr>
    <tr class="">
      <th>White Gold</th>
      <td>
        <p>14Kt, 18Kt</p>
      </td>
    </tr>
    <tr class="alt">
      <th>Yellow Gold</th>
      <td>
        <p>14Kt, 18Kt</p>
      </td>
    </tr>
    <tr class="">
      <th>OTHER INFORMATION</th>
      <td></td>
    </tr>
    <tr class="alt">
      <th>Finish Type</th>
      <td>
        <p>Polished</p>
      </td>
    </tr>
    <tr class="">
      <th>Width Bottom</th>
      <td>
        <p>2.1mm</p>
      </td>
    </tr>
  </tbody>


jsFiddle


Nota:

Tienes un error ortográfico en la palabra available.

2
  • Me parece tambien una excelente propuesta! La unica diferencia con la mia es que tu haces todo del lado del cliente y en mi respuesta del lado del servidor! Pero ambas sirven para el fin esperado! Saludos
    – sioesi
    Commented el 21 oct. 2016 a las 23:16
  • @sioesi Gracias, concuerdo contigo!
    – Ricky Ruiz
    Commented el 21 oct. 2016 a las 23:25

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.