Настройка цвета элементов с помощью JavaScript на основе текста - PullRequest
Новая
       24

Настройка цвета элементов с помощью JavaScript на основе текста

2 голосов
/ 25 сентября 2019

У меня есть таблица с некоторыми значениями, которые я хочу установить цвет на основе значения, которое они имеют.Что я сделал, это было: 

window.onload = setColor();

function setColor() {
  var elems = document.getElementsByTagName("td");
  for (i = 0; i < elems.length; i++) {
    if (elems[i].innerText === "Passed") {
      elems[i].style.backgroundColor = "green";
    } else if (elems[i].innerText === "Failed") {
      elems[i].style.backgroundColor = "red";
    }
  }
}
<table id="myTable">
  <tr>
    <th style="width:50%;">SET</th>
    <th style="width:50%;">TEST STATUS</th>
  </tr>
  <tr>
    <td>Set</td>
    <td>Passed</td>
  </tr>
  <tr>
    <td>Set</td>
    <td>Passed</td>
  </tr>
</table>

Но, как вы можете видеть, я в общем зацикливаюсь td elements, чтобы сделать это, и я думаю, что это не хорошо, не так ли?

Итак, у меня есть несколько вопросов:

  • Есть ли обходной путь для установки какого-то onload events для elements, который не поддерживает его, чтобы я мог сделать что-то вроде magicevent=setColor(this)?Я ожидаю, что таблица будет стабильной.
  • Является ли то, что я спросил в последнем вопросе, хорошей практикой?Если нет, то что бы вы порекомендовали?
  • Как я мог добиться того, что сделал в CSS?Я не понимаю синтаксис CSS в js.

Заранее спасибо.

Ответы [ 2 ]

1 голос
/ 25 сентября 2019

Я пытаюсь ответить на ваши вопросы:

  • Ваше решение стабильно и работает во всех браузерах.Другим способом достижения этого может быть рендеринг тегов td с определенным классом и предоставление классу правила css без использования javascript.

Что-то вроде: 

    <style>
     .failed{
       background-color: red; 
     }
     .passed{
      background-color: green;
     }
    </style>

    <table>
    <tr><td class="failed">failed </td></tr> 
    <tr><td class="passed">passed </td></tr>
    </table>
  • Ваше решение стабильно.Имейте в виду, что это может быть медленно, если в вашей таблице тысячи строк.

  • Когда вы используете elems[i].style.backgroundColor = "red";, вы устанавливаете background-color элемента внутри elems в положение i,Внутри elems[i] есть определенный td.Другой подход заключается в добавлении класса к td на основе значения теста (пройден или не пройден).Тем не менее, я предлагаю следующее решение:

    <table id="myTable"> <tr> <th style="width:50%;">SET</th> <th style="width:50%;">TEST STATUS</th> </tr> <tr> <td>Set</td> <td>Passed</td> </tr> <tr> <td>Set</td> <td>Passed</td> </tr> </table> <style> .failed{ background-color: red; } .passed{ background-color: green; } </style> <script> window.onload = setColor(); function setColor(){ var elems = document.getElementsByTagName("td"); for (i = 0; i < elems.length; i++) { if (elems[i].innerText === "Passed") { elems[i].classList.add("passed"); }else if (elems[i].innerText === "Failed"){ elems[i].classList.add("failed"); } } } </script>

1 голос
/ 25 сентября 2019

Ваш скрипт может быть изменен на что-то вроде этого: 

function setColor(){
    var elems = document.querySelectorAll("#myTable td:last-child");
    for (i = 0; i < elems.length; i++) {
      if (elems[i].innerText === "Passed") {
          elems[i].style.backgroundColor = "green";
      }
      else if (elems[i].innerText === "Failed")
      {
          elems[i].style.backgroundColor = "red";
      }
    }
}

document.addEventListener("DOMContentLoaded", setColor);
<table id="myTable">
<tr>
    <th style="width:50%;">SET</th>
    <th style="width:50%;">TEST STATUS</th>
</tr>
<tr>
    <td>Set</td>
    <td>Passed</td>
</tr>
<tr>
    <td>Set</td>
    <td>Passed</td>
</tr>
</table>

Но было бы лучше использовать классы CSS для раскрашивания текста: 

  if (elems[i].innerText === "Passed") {
      elems[i].classList.add("passed");
  }
  else if (elems[i].innerText === "Failed")
  {
      elems[i].classList.add("failed");
  }

В style.css: 

.passed {
  background-color: green;
}
.failed {
  background-color: red;
}
...