Как раскрасить строку на основе значения ячейки в чистом css? - PullRequest
0 голосов
/ 26 февраля 2020

Я использую фреймворк, который генерирует очень многоуровневый css.

Я просто хочу дать всей строке (или каждой ячейке) цвет фона на основе значения ячейки строки (из одного столбца). Я не хочу использовать javascript, но чистый css.

Ниже приведен фрагмент html css, где целая строка должна получить цвет фона на основе <td title="Geen Voorraad">. Значение title имеет разные значения, поэтому Geen Voorraad должен добавить красный цвет фона. Кто-нибудь решение?

<div class="mx-grid mx-datagrid mx-name-grid2 voorraad" id="mxui_widget_DataGrid_2" data-mendix-id="0_22" data-focusindex="0" widgetid="mxui_widget_DataGrid_2" style="">
  <div class="mx-grid-searchbar" dojoattachpoint="searchNode">
    <div class="mx-grid-search-inputs" dojoattachpoint="searchArgumentNode">
      <div class="mx-grid-search-item" id="mxui_widget_SearchInput_8" widgetid="mxui_widget_SearchInput_8">
        <div class="mx-grid-search-label">
          <label>Naam</label>
        </div>
        <div class="mx-grid-search-input mx-name-searchField11">
          <input type="text" class="form-control">
        </div>
      </div>
      <div class="mx-grid-search-item" id="mxui_widget_SearchInput_9" widgetid="mxui_widget_SearchInput_9">
        <div class="mx-grid-search-label">
          <label>Code</label>
        </div>
        <div class="mx-grid-search-input mx-name-searchField18">
          <input type="text" class="form-control">
        </div>
      </div>
      <div class="mx-grid-search-item" id="mxui_widget_SearchInput_10" widgetid="mxui_widget_SearchInput_10">
        <div class="mx-grid-search-label">
          <label>Prijs</label>
        </div>
        <div class="mx-grid-search-input mx-name-searchField12">
          <input type="text" class="form-control">
        </div>
      </div>
      <div class="mx-grid-search-item" id="mxui_widget_SearchInput_11" widgetid="mxui_widget_SearchInput_11">
        <div class="mx-grid-search-label">
          <label>Voorraadstatus</label>
        </div>
        <div class="mx-grid-search-input mx-name-searchField1">
          <select class="form-control">
            <option value=""></option>
            <option value="mxui_widget_SearchInput_11_Inactief">Gearchiveerd</option>
            <option value="mxui_widget_SearchInput_11_ActiefVoldoendeVoorraad">Voldoende Voorraad</option>
            <option value="mxui_widget_SearchInput_11_ActiefBeperkteVoorraad">Beperkte Voorraad</option>
            <option value="mxui_widget_SearchInput_11_ActiefGeenVoorraad">Geen Voorraad</option>
            <option value="mxui_widget_SearchInput_11_Verlopen">Verlopen</option>
          </select>
        </div>
      </div>
    </div>
    <div class="mx-grid-search-controls" dojoattachpoint="searchControlNode">
      <button type="button" class="btn mx-button btn-default mx-name-search mx-grid-search-button" id="mxui_widget_Button_12" widgetid="mxui_widget_Button_12"> Zoeken </button>
      <button type="button" class="btn mx-button btn-default mx-name-reset mx-grid-reset-button" id="mxui_widget_Button_13" widgetid="mxui_widget_Button_13"> Wissen </button>
    </div>
    <div class="mx-grid-search-message" dojoattachpoint="messageNode" style="display: none;"></div>
  </div>

  <div class="mx-grid-controlbar" dojoattachpoint="controlNode">
    <div class="mx-grid-toolbar" dojoattachpoint="toolBarNode">
      <button type="button" class="btn mx-button mx-name-newButton2 btn-success" id="mxui_widget_ControlBarButton_10" data-mendix-id="0_17" title="" widgetid="mxui_widget_ControlBarButton_10" data-roving-tabindex="" tabindex="0"> Product toevoegen </button>
      <button type="button" class="btn mx-button mx-name-actionButton3 btn-primary" id="mxui_widget_ControlBarButton_11" data-mendix-id="0_18" title="" widgetid="mxui_widget_ControlBarButton_11" data-roving-tabindex="" tabindex="-1"> Product bewerken </button>
      <button type="button" class="btn mx-button mx-name-actionButton4 btn-danger" id="mxui_widget_ControlBarButton_12" data-mendix-id="0_19" title="" widgetid="mxui_widget_ControlBarButton_12" data-roving-tabindex="" tabindex="-1"> Product verwijderen </button>
      <button type="button" class="btn mx-button mx-name-actionButton5 btn-inverse" id="mxui_widget_ControlBarButton_13" data-mendix-id="0_20" title="" widgetid="mxui_widget_ControlBarButton_13" data-roving-tabindex="" tabindex="-1"> Product archiveren </button>
      <button type="button" class="btn mx-button mx-name-exportToExcelButton2 btn-default" id="mxui_widget_ControlBarButton_14" data-mendix-id="0_21" title="" widgetid="mxui_widget_ControlBarButton_14" data-roving-tabindex="" tabindex="-1"> Naar Excel exporteren </button>
    </div>
    <div class="mx-grid-pagingbar" dojoattachpoint="pagingBarNode" role="navigation" aria-label="Paginering">
      <button type="button" class="btn mx-button mx-name-paging-first" id="mxui_widget_Button_14" aria-label="Ga naar de eerste pagina" widgetid="mxui_widget_Button_14" data-roving-tabindex="" tabindex="-1" disabled="disabled"><span class="glyphicon glyphicon-step-backward"></span> </button>
      <button type="button" class="btn mx-button mx-name-paging-previous" id="mxui_widget_Button_15" aria-label="Ga naar de vorige pagina" widgetid="mxui_widget_Button_15" data-roving-tabindex="" tabindex="-1" disabled="disabled"><span class="glyphicon glyphicon-backward"></span> </button>
      <div class="dijitInline mx-grid-paging-status" aria-hidden="true">1 tot 2 van 2</div> <span class="sr-only" tabindex="0" data-roving-tabindex="">Huidige weergave 1 tot 2 van 2</span>
      <button type="button" class="btn mx-button mx-name-paging-next" id="mxui_widget_Button_16" aria-label="Ga naar de volgende pagina" widgetid="mxui_widget_Button_16" data-roving-tabindex="" tabindex="-1" disabled="disabled"><span class="glyphicon glyphicon-forward"></span> </button>
      <button type="button" class="btn mx-button mx-name-paging-last" id="mxui_widget_Button_17" aria-label="Ga naar de laatste pagina" widgetid="mxui_widget_Button_17" data-roving-tabindex="" tabindex="-1" disabled="disabled"><span class="glyphicon glyphicon-step-forward"></span> </button>
    </div>
  </div>

  <div class="mx-grid-content" dojoattachpoint="contentNode" style="height: auto;">
    <table dojoattachpoint="gridTable">
      <caption class="sr-only" dojoattachpoint="gridCaptionNode"></caption>
      <colgroup dojoattachpoint="colGroupNode">
        <col style="width: 20%;">
        <col style="width: 20%;">
        <col style="width: 20%;">
        <col style="width: 20%;">
        <col style="width: 20%;">
      </colgroup>
      <thead dojoattachpoint="gridHeadNode">
        <tr class="mx-name-head-row">
          <th data-id="57" class="mx-name-column11 mx-left-aligned" title="Naam">
            <div class="mx-datagrid-sort-icon" style=""><span class="mx-datagrid-sort-text">▲</span></div>
            <div class="mx-datagrid-head-caption">Naam</div>
          </th>
          <th data-id="58" class="mx-name-column12 mx-left-aligned" title="Code">
            <div class="mx-datagrid-sort-icon" style="display: none"><span class="mx-datagrid-sort-text"></span></div>
            <div class="mx-datagrid-head-caption">Code</div>
            <div class="mx-datagrid-column-resizer" data-id="62"></div>
          </th>
          <th data-id="59" class="mx-name-column1 mx-right-aligned" title="Prijs">
            <div class="mx-datagrid-sort-icon" style="display: none"><span class="mx-datagrid-sort-text"></span></div>
            <div class="mx-datagrid-head-caption">Prijs</div>
            <div class="mx-datagrid-column-resizer" data-id="63"></div>
          </th>
          <th data-id="60" class="mx-name-column13 mx-right-aligned" title="Voorraad">
            <div class="mx-datagrid-sort-icon" style="display: none"><span class="mx-datagrid-sort-text"></span></div>
            <div class="mx-datagrid-head-caption">Voorraad</div>
            <div class="mx-datagrid-column-resizer" data-id="64"></div>
          </th>
          <th data-id="61" class="mx-name-column20 mx-left-aligned" title="Voorraadstatus">
            <div class="mx-datagrid-sort-icon" style=""><span class="mx-datagrid-sort-text">▼</span></div>
            <div class="mx-datagrid-head-caption">Voorraadstatus</div>
            <div class="mx-datagrid-column-resizer" data-id="65"></div>
          </th>
        </tr>
      </thead>
      <tbody dojoattachpoint="gridBodyNode">
        <tr class="mx-name-index-0 background-red" data-id="72" data-roving-tabindex="" tabindex="0">
          <td data-id="73" class="mx-name-column11 mx-left-aligned" title="2">
            <div class="mx-datagrid-data-wrapper">2</div>
          </td>
          <td data-id="74" class="mx-name-column12 mx-left-aligned" title="2">
            <div class="mx-datagrid-data-wrapper">2</div>
          </td>
          <td data-id="75" class="mx-name-column1 mx-right-aligned" title="0,00">
            <div class="mx-datagrid-data-wrapper">0,00</div>
          </td>
          <td data-id="76" class="mx-name-column13 mx-right-aligned" title="0">
            <div class="mx-datagrid-data-wrapper">0</div>
          </td>
          <td data-id="77" class="mx-name-column20 mx-left-aligned" title="Geen Voorraad">
            <div class="mx-datagrid-data-wrapper"><img src="http://localhost:8080/img/Main$Images$Red.png?637183236919148969"></div>
          </td>
        </tr>
        <tr class="mx-name-index-1 background-orange" data-id="78" data-roving-tabindex="" tabindex="-1">
          <td data-id="79" class="mx-name-column11 mx-left-aligned" title="rrew">
            <div class="mx-datagrid-data-wrapper">rrew</div>
          </td>
          <td data-id="80" class="mx-name-column12 mx-left-aligned" title="rere">
            <div class="mx-datagrid-data-wrapper">rere</div>
          </td>
          <td data-id="81" class="mx-name-column1 mx-right-aligned" title="1321,00">
            <div class="mx-datagrid-data-wrapper">1321,00</div>
          </td>
          <td data-id="82" class="mx-name-column13 mx-right-aligned" title="1">
            <div class="mx-datagrid-data-wrapper">1</div>
          </td>
          <td data-id="83" class="mx-name-column20 mx-left-aligned" title="Beperkte Voorraad">
            <div class="mx-datagrid-data-wrapper"><img src="http://localhost:8080/img/Main$Images$yellow.png?637183236919148969"></div>
          </td>
        </tr>
      </tbody>
      <tfoot dojoattachpoint="gridFootNode" style="display: none;"></tfoot>
    </table>
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 26 февраля 2020

Если вы можете переместить td с заголовком в начало строки, то вы можете сделать это.

td[title="Geen Voorraad"], td[title="Geen Voorraad"] ~ td {
  background-color: red;
}
            <tbody dojoattachpoint="gridBodyNode">
                <tr class="mx-name-index-0 background-red" data-id="72" data-roving-tabindex="" tabindex="0">
                    <td data-id="77" class="mx-name-column20 mx-left-aligned" title="Geen Voorraad">
                        <div class="mx-datagrid-data-wrapper"><img src="http://localhost:8080/img/Main$Images$Red.png?637183236919148969"></div>
                    </td>
                    <td data-id="73" class="mx-name-column11 mx-left-aligned" title="2">
                        <div class="mx-datagrid-data-wrapper">2</div>
                    </td>
                    <td data-id="74" class="mx-name-column12 mx-left-aligned" title="2">
                        <div class="mx-datagrid-data-wrapper">2</div>
                    </td>
                    <td data-id="75" class="mx-name-column1 mx-right-aligned" title="0,00">
                        <div class="mx-datagrid-data-wrapper">0,00</div>
                    </td>
                    <td data-id="76" class="mx-name-column13 mx-right-aligned" title="0">
                        <div class="mx-datagrid-data-wrapper">0</div>
                    </td>
                </tr>
                <tr class="mx-name-index-1 background-orange" data-id="78" data-roving-tabindex="" tabindex="-1">
                    <td data-id="79" class="mx-name-column11 mx-left-aligned" title="rrew">
                        <div class="mx-datagrid-data-wrapper">rrew</div>
                    </td>
                    <td data-id="80" class="mx-name-column12 mx-left-aligned" title="rere">
                        <div class="mx-datagrid-data-wrapper">rere</div>
                    </td>
                    <td data-id="81" class="mx-name-column1 mx-right-aligned" title="1321,00">
                        <div class="mx-datagrid-data-wrapper">1321,00</div>
                    </td>
                    <td data-id="82" class="mx-name-column13 mx-right-aligned" title="1">
                        <div class="mx-datagrid-data-wrapper">1</div>
                    </td>
                    <td data-id="83" class="mx-name-column20 mx-left-aligned" title="Beperkte Voorraad">
                        <div class="mx-datagrid-data-wrapper"><img src="http://localhost:8080/img/Main$Images$yellow.png?637183236919148969"></div>
                    </td>
                </tr>
            </tbody>
0 голосов
/ 26 февраля 2020

Невозможно в чистом виде CSS выбрать элемент в зависимости от его содержимого. Но в коде, который вы разместили, вы применили разные классы к каждой строке, поэтому - если бы вы могли делать это динамически - это бы сработало. В противном случае вам понадобится пара строк javascript ...

[обновление]. Я нашел (довольно хитрый) способ сделать это; начиная с вашего html кода, я добавил псевдоэлемент, который будет использоваться в качестве фона для всей строки; это требует, чтобы TR имели относительную позицию (таким образом, они должны иметь свойство display, установленное на другое значение, чем «table-row», в этом случае я выбрал «flex»). Вот код css:

.voorraad tr, 
.voorraad tr div 
{
  position: relative;
  overflow: hidden;
}

.voorraad tr div 
{
  z-index:1;
}

.voorraad tr,
.mx-name-head-row
{
  display:flex;
  justify-content:center;
  align-items:center;
}

.voorraad td,
.mx-name-head-row th
{
  flex:1;
  text-align:center;
}

td[title="Geen Voorraad"]:before
{
  content: "";
  display:block;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:orange;
}

Это не то, что вы бы назвали «чистым кодом», но это делает работу.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...