Проблема:
У меня есть одна таблица на вкладку (всего 5 вкладок), каждая из которых состоит из трех строк (один заголовок таблицы и две данные таблицы).
Я хочу выполнить JS-скрипт, который сканирует только строки таблицы с атрибутом id
, а затем проверяет переключатели внутри этой строки. Если ничего не было выбрано, строка таблицы должна изменить цвет, добавив в нее класс.
Минимальный (рабочий) пример:
HTML
<table class="table table-striped table-borderless" id="survey">
<thead class="text-center">
<tr>
<th scope="col"></th>
<th scope="col">1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
<th scope="col">5</th>
</tr>
</thead>
<tbody>
<tr id="1">
<td scope="row">Question 1</td>
<td><input type="radio" name="1" id="1" value="1"></td>
<td><input type="radio" name="1" id="1" value="2"></td>
<td><input type="radio" name="1" id="1" value="3"></td>
<td><input type="radio" name="1" id="1" value="4"></td>
<td><input type="radio" name="1" id="1" value="5"></td>
</tr>
<tr id="2">
<td scope="row">Question 2</td>
<td><input type="radio" name="2" id="2" value="1"></td>
<td><input type="radio" name="2" id="2" value="2"></td>
<td><input type="radio" name="2" id="2" value="3"></td>
<td><input type="radio" name="2" id="2" value="4"></td>
<td><input type="radio" name="2" id="2" value="5"></td>
</tr>
</tbody>
</table>
JavaScript
Функция вызывается кнопкой в HTML, когда пользователь пытается переключить вкладку.
validateForm() {
var valid = true;
var rows = Nodes.tab[this.currentTab].querySelectorAll('tr[id]');
for (var i = 0; i < rows.length; i++) {
var inputs = rows[i].querySelectorAll("input");
for (var x = 0; x < inputs.length; x++) {
// Add class to table row?
}
}
// If valid then mark step with green color
if (valid) {
document.getElementsByClassName("step")[this.currentTab].classList.add("finish");
}
// Return the valid status
return valid;
}
Желаемый выход:
Если пользователь не проверяет хотя бы одну радиокнопку из группы кнопок, добавьте класс CSS «error» в эту строку таблицы.