Выделите строку таблицы, если переключатель не был отмечен - PullRequest
0 голосов
/ 17 сентября 2018

Проблема:

У меня есть одна таблица на вкладку (всего 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» в эту строку таблицы.

1 Ответ

0 голосов
/ 17 сентября 2018

Просто подробно остановлюсь на моих комментариях об использовании собственной проверки формы браузера для написания меньшего количества кода.

Чистое решение для CSS и HTML:

<style>
  #form1:invalid ~ table #row1 {
    background-color: red;
  }
  #form2:invalid ~ table #row2 {
    background-color: red;
  }
</style>

<form id="form1"></form>
<form id="form2"></form>
<table class="table table-striped table-borderless" id="survey">
    <thead class="text-center">
      <!--...-->
    </thead>
    <tbody>
      <tr id="row1">
        <td scope="row">Question 1</td>
        <td><input type="radio" name="f1" value="1" required form="form1"></td>
        <td><input type="radio" name="f1" value="2" form="form1"></td>
        <td><input type="radio" name="f1" value="3" form="form1"></td>
        <td><input type="radio" name="f1" value="4" form="form1"></td>
        <td><input type="radio" name="f1" value="5" form="form1"></td>
      </tr>
      <tr id="row2">
        <td scope="row">Question 2</td>
        <td><input type="radio" name="f2" value="1" required form="form2"></td>
        <td><input type="radio" name="f2" value="2" form="form2"></td>
        <td><input type="radio" name="f2" value="3" form="form2"></td>
        <td><input type="radio" name="f2" value="4" form="form2"></td>
        <td><input type="radio" name="f2" value="5" form="form2"></td>
      </tr>
  </tbody>
</table>

И если вам действительно нужен JavaScript, чтобы знать, что происходит, вы можете вызвать его, чтобы определить, имеет ли радиогруппа значение:

document.getElementById('form1').checkValidity()

Будет возвращено false, если в группе не выбрано радио.

...