Добавьте класс CSS для каждого элемента tr, если он содержит определенное значение

Я пытаюсь добавить класс к элементу tr (last_value_row) в форме, когда целевое значение в первом td элемента last_value_row равно "New Target". Пока что только первый элемент добавляет класс, но не все остальные элементы, где целевое значение равно "New Target".

Это моя HTML-сторона:

<table id="epoch_forms_table" class="epoch_forms_table">
   <tr class="title_row">
      <th>{% autoescape off %}{% trans "Target name" %}{% endautoescape %}</th>
      ...
      <th class="last"></th>
   </tr>
   <tr class="value_row{% if epoch_form.errors %} error{% endif %}">
      <td></td>
      <td><label><input type="number" size="13" step="0.001"></label></td>
      <td class="{{ key }}_unit unit" id="{{ key }}">{{ value }}</td>
      <td><a href="#" class="button icon remove remove_row_button danger"></a></td>
   </tr>
   <tr id="last_value_row" class="last_value_row target_background_color">
      <td></td>
      <td></td>
      <td class="{{ key }}_unit unit" id="{{ key }}">{{ value }}</td>
      <td></td>
   </tr>
   <tr class="error_row">
      {% for field in epoch_form %}
         <td>{{ field.errors }}</td>
      {% endfor %}
      <td></td>
   </tr>
</table>

А это моя JavaScript-сторона:

var new_target_element = document.getElementById("last_value_row");
var last_values = [];
var index = $("#epoch_forms_table tr.value_row").index(value_row);


...
for (let i = 0; i < el.length; i++) {
   for (let i = 0, cell; cell = new_target_element.cells[i]; i++) {
      if ($(this).find("td:contains('New target')")) {
         new_target_element.classList.add("new_target_color");
         new_target_element.classList.remove("target_background_color");
      } else {
         new_target_element.classList.add("target_background_color");
         new_target_element.classList.remove("new_target_color");
      }
   }
}
 if (last_values[index].length === 0) {
            last_value_row.find("td:first").html("New target");
        } else {
...
}
}

Я пытаюсь добавить или удалить CSS-класс "new_target_color" к каждой "last_value_row", когда в первом td есть или нет целевого значения "New Target". Пока что только первый элемент всегда меняет свой класс.

Я думаю, что ваш ряд с ID с last_value_row - это немного красная селедка, на самом деле вы хотите найти ряд с классом this (иначе вы ищете серию уникальных значений или попадаете на территорию nth child).

// Select all rows with class 'last_value_row'
var lastValueRows = document.querySelectorAll('.last_value_row');

// Function to add or remove classes based on the content
function updateRowClasses(row) {
    // Check if the first cell contains 'New Target'
    var isFirstCellNewTarget = row.cells[0].textContent.trim() === 'New Target';

    // Add or remove classes based on the condition
    if (isFirstCellNewTarget) {
        row.classList.add("new_target_color");
        row.classList.remove("target_background_color");
    } else {
        row.classList.remove("new_target_color");
        row.classList.add("target_background_color");
    }
}

// Iterate over each 'last_value_row' and apply the function
lastValueRows.forEach(updateRowClasses);
Вернуться на верх