Назначать стили как содержание

я ищу способ применять только из-за чистого CSS фонд цвета к специфической этикетке <tr> в следующей пластине, Вы различаетесь согласно содержанию, в этом случае, содержание должно применяться только в <tr> что находятся в прописных буквах:

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

Таким образом Вы точно, как Вы печатаетесь в PHP, так как более легко управлять стилями с темы сын в шаблоне, я выбрал альтернативу, выдвинутую ранее.

Конечный кодекс должен назначать следующие стили в <tr> с прописными буквами:

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

Этот метод возможный? Спасибо.

2
задан 19.10.2016, 20:55
2 ответа

Не возможно давать стиль элементам, основанный на Вашем контенте с CSS, за исключением псевдокласса :empty, что в твоем случае не поможет нам.


Как, если ты используешь vanilla Javascript?

Первый ты создаешь простую функцию, которая проверяла бы, если текст внутри твоего элемента <th> будь в чистых прописных буквах:

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

Эта функция возвратит тебе booleano, уже будьте true или false.

Чем нам будет служить это?

Ты можешь пробегать DOM в поисках элементов <th> уже будьте с:

document.querySelectorAll("th") или document.getElementsByTagName("th")

document.querySelectorAll () ~ document.getElementsByTagName ()

Это возвратит тебе список узлов, если он будет состоять в том, что он нашел оказанные, которую ты можешь повторять:

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

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

После ты используешь функцию, которую ты создал из-за каждого элемента внутри списка.

Как вышеупомянутая функция надеется, что (string) мы используем цепь textContent, который возвращает нам текст внутри элемент.

Если результат todasMayusculas() он бросает нас true, ты добавляешь класс твоего выбора, в этом случае он назовется seleccionado:

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

В конце концов, ты добавляешь этот класс к твоему файлу CSS с желанными свойствами:

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

Мы соединяем все и это остается так:

(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


Замечание:

У тебя есть орфографическая ошибка в слове available.

1
ответ дан 24.11.2019, 13:02
  • 1
    Оно мне кажется также превосходным предложением! Единственное различие с моей состоит в том, что ты делаешь все стороной клиента и в моем ответе стороны сервера! Но оба служат для ожидаемого конца! Привет –  sioesi 22.10.2016, 02:16
  • 2
    @sioesi Спасибо, я согласовываюсь с тобой! –  Ricky 22.10.2016, 02:25

Как я прокомментировал тебе, трудно давать оптимальный ответ, не видя твоей нынешней ситуации, но я могу представлять себе что-либо подобное:

Изобретая, что свойство, которое ты нуждается в том, чтобы оказаться отличным, - Имя

.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>
<? } ?>
3
ответ дан 24.11.2019, 13:02
  • 1
    Превосходный ответ, так как он идет в источник проблемы и не пробует заплату стороны клиента... Видя источник данных, tambi и # 233; n есть колонны в min и # 250; sculas. Quiz и # 225; s podr и # 237; схвати показывать c и # 243; mo печатать обеих форм (если est и # 225; в мае и # 250; sculas или не) –  Mariano 20.10.2016, 03:27
  • 2
    Спасибо @Mariano, изданный! –  sioesi 20.10.2016, 14:47

Теги

Похожие вопросы