I'm attempting to assign a class to a tr element (last_value_row) in a form when the target value in the first td of the last_value_row element is "New Target". Currently, only the first element will have the class added, while all other elements with the target value "New Target" do not.
This is the HTML portion:
<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>
Here is the JavaScript code I am using:
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 {
...
}
}
I am striving to toggle the CSS class "new_target_color" on every "last_value_row" depending on whether or not there is a target value "New Target" in the first td. However, currently, only the first element consistently changes its class.