Изменить <td>цвет для конкретного значения - PullRequest
Новая
       6

Изменить <td>цвет для конкретного значения

0 голосов
/ 20 февраля 2019

Я хочу изменить цвет фона для тд, когда его значение, например, "Сбой". 

    <tbody>
    <template is="dom-repeat" items="{{enhancedOutput.backups}}" as="backup">
    <tr>
    <td>[[backup.myBackupName]]</td>
    <td>[[backup.size]] GiB</td>
    <td>[[backup.begin_time]]</td>
    <td>[[backup.end_time]]</td>
    <td>[[backup.total_time]] s</td>
    <td>IF THIS VALUE IS "FAILED" THEN CHANGE BACKGROUND-COLOR>[[backup.status]]</td>
   </tr>
   </template>
    </tbody>
    </table>

Ответы [ 2 ]

0 голосов
/ 20 февраля 2019

Заимствование из того, что пользователь @Oram описывал об использовании классов вместо data-attr (необязательно): 

function triggerFailure(){ //replace this with the actual function you use to trigger the FAILED text
  var i, tdEles = document.getElementsByTagName("td");
  
  for(i=0;i<tdEles.length;i++){
    //Loop through all the elements with tag name td
    //And change their class to "failed"
    //So that the CSS code can take care of it and change the background to red
    var td = tdEles[i];
    
    //As an extra, this helps to remove formatting of where the value of the td changes from FAILED to success
    td.className = td.className.replace(/ failed/gi,"");
    
    if(td.innerHTML.toLowerCase().indexOf("failed")!= -1){ 
      //word failed has been found
      //Note that it matches any case where it can find the word "failed"
      td.className+=" failed";
    }
  }
  
}

function togglePassed(){
  document.getElementById("toToggle").innerHTML = (document.getElementById("toToggle").innerHTML=="Failed")?"Passed":"Failed";
  
  triggerFailure();
}
td{
  padding: 10px; /* just beautification */
}

td.failed{
  background: red;
  /* You can add other stuff here in case you want something more fancy than just a red background*/
}
<input type="button" onclick="triggerFailure()" value="Turn Failures red" />
<input type="button" onclick="togglePassed()" value="Toggle Failed and Passed" />
<br>

<table>
  <tr>
    <td id="toToggle">Failed</td>
    <td>Passed</td>
  </tr>
  <tr>
    <td>Just gibberish</td>
    <td>Oh no something failed!</td>
  </tr>
</table>

Кроме того, я не знаю, какую функцию вы используете, чтобы превратить ваш текст в тд в "FAILED" , но вы должны вызвать вышеуказанный код JS в вашей функции.

0 голосов
/ 20 февраля 2019

Вы можете сделать это несколькими способами, проверьте ниже фрагмент.

используя атрибут данных в html 

td[data-content="Failed"] {
  background: red;
}
<table>
<tr>
<td data-content="Failed">Failed</td>
<td data-content="Passed">Passed</td>
</tr>
</table>

с использованием Jquery

$('td:contains("Failed")').css('background','red');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>Failed</td>
<td>Passed</td>
</tr>
</table>
...