JQuery: добавление класса в строку таблицы при установленном флажке

Question

Я пытаюсь добавить строки таблиц класса (чтобы потом можно было их стилизовать), где установлен флажок (JQuery и Google Apps Script)

В настоящее время у меня есть некоторые функции, которые работают при использовании кнопки,Однако, когда я попытался изменить их, они не работают, как задумано.Я даже попробовал .addCss, и это не сработало.Когда я проверяю консоль, я не вижу, чтобы класс был когда-либо добавлен.У меня это работало один раз, но теперь я не могу вернуться к этому моменту!

Я видел ЭТО и изменил его, но css не появляется.

СООТВЕТСТВУЮЩИЙ КОД

<script>
 //BUTTONS
 $(document).ready(function () {
    $("#tbody tr").on('input', function () {
      var checkbox= $(this).closest('tr').find('[type="checkbox"]');
      checkbox.prop('checked', $(this).val());
    });

   //HIDE UNCHECKED ROWS
    $("#clicker").click(function () {
      $('[type="checkbox"]:not(:checked)').closest('tr').hide();
      return false;
    });

    //SHOW ALL ROWS
     $("#show").click(function () {
      $('[type="checkbox"]:not(:checked)').closest('tr').show();
      return false;
    });

    //CLEAR ALL CHECK MARKS
     $("#clear").click(function () {
      $('[type="checkbox"]').removeAttr('checked');
      return false;
    });

});
 </script>


<script>
//CURRENT ATTEMPT
//I can check all boxes, but styling doesn't work. 
   function setClass() {
  var checkboxes = $('tbody').find('.checkbox');
  checkboxes.closest('tr').toggleClass('on', false);
  checkboxes.not('.check_all').filter(':checked').closest('tr').toggleClass('on', true);
}
$(function($) {
  $(".check_all").on('change', function() {
    var checkAll = $(this).prop("checked");
    $(".checkbox").prop('checked', checkAll);
    var checkboxes = $('tbody').find('.checkbox')
      .eq(0).trigger('setclass');
  });
  var checkboxes = $('tbody').find('.checkbox');
  checkboxes.on('change', function() {
    if ($(this).prop("checked")) {
      $(".check_all").prop('checked', false);
    }
    if ($('.checkbox:checked').length == $('.checkbox').length) {
      $(".check_all").prop('checked', true);
    }
    $(this).trigger('setclass');
  });
  checkboxes.on('setclass', setClass);
  checkboxes.eq(0).trigger('setclass');
});
</script>

СТИЛЬ

<style>
  table, td {
  border: 1px solid black;
  border-collapse: collapse;
}
//CELL WIDTH
td {
   min-width:100px;
}
//TABLE HEAD
th {
   font-size: 20px;
   border: 2px solid black;
   background: #66e9ff;
   border-collapse: collapse;
}
//STYLING FOR CHECKED ROW
 tr.on td {
   background: #ffbbbb;
 }
//STYLING FOR CHECKED ROW
 .on>td {
   color: dark;
 }
//STYLING FOR HOVERING OVER ROW
#tbody tr:hover {
    background-color:yellow;
}
//SELECTABLE
 #feedback { font-size: 1.4em; }
  #table .ui-selecting { background: #FECA40; }
  #table .ui-selected { background: #928bff; color: white; }
  #table { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #table tr { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>

1. Как добавить класс вСтрока таблицы, в которой отмечен флажок?
2. Дополнительный вопрос, следует ли мне писать другие функции флажков по-другому?

Answer 1

Я думаю, это то, что вы ищете.Рассмотрим следующий код.

$(function() {

  function setCheck(o, c) {
    o.prop("checked", c);
    if (c) {
      o.closest("tr").addClass("checked");
    } else {
      o.closest("tr").removeClass("checked");
    }
  }

  function setCheckAll(o, c) {
    o.each(function() {
      setCheck($(this), c);
    });
    if (c) {
      $(".check_all").prop("title", "Check All");
    } else {
      $(".check_all").prop("title", "Uncheck All");
    }
  }

  $(".check_all").on('change', function() {
    setCheckAll($("tbody input[type='checkbox']"), $(this).prop("checked"));
  });
  $("tbody tr").on("click", function(e) {
    var chk = $("[type='checkbox']", this);
    setCheck(chk, !$(this).hasClass("checked"));
  });
});

table {
  border: 1px solid black;
  border-collapse: collapse;
}

#table {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60%;
}

#table tr {
  margin: 3px;
  padding: 0.4em;
  font-size: 1.4em;
  height: 18px;
}

thead tr th {
  background-color: #66e9ff;
  font-size: 20px;
  border: 2px solid black;
  border-collapse: collapse;
}

tbody td {
  min-width: 100px;
  border: 1px solid black;
}

tbody td:first-child {
  text-align: center;
}

tbody tr.checked td {
  background-color: #ffbbbb;
  color: dark;
}

tbody tr:hover {
  background-color: yellow;
}

#feedback {
  font-size: 1.4em;
}

table .ui-selecting {
  background: #FECA40;
}

table .ui-selected {
  background: #928bff;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th><input type="checkbox" class="check_all" value="Check All"></th>
      <th>Header 1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox"></td>
      <td>Label 1</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>Label 2</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>Label 3</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>Label 4</td>
    </tr>
  </tbody>
</table>

В основном у нас есть два сценария.Пользователь проверяет один элемент или пользователь выбирает проверить все.Для элемента, который отмечен, следует обновить родительский элемент <tr> классом для стиля.Это должно быть в случае, если один элемент отмечен или не отмечен, или для всех элементов.

Я сделал небольшую функцию для выполнения этого для одного объекта.Затем я создал функцию, которая могла бы выполнить итерацию всех из них для сценария «Проверить все».Я отошел от .toggleClass(), так как он мог запутаться между одной проверкой и проверкой всех.

Обновление

Я обновил приведенный выше код для работы одним нажатием кнопкистрока против простого нажатия на флажок.

Надеюсь, это поможет.