Форум

happy_Mikhail · #1 (**permalink**) 27.06.2019, 10:29

Здравствуйте, подскажите пожалуйста как справиться с такой задачей: есть таблица в которой теги tr имеют разный стиль, для простоты назовем class1 и class2

<tr class="class1"></tr>
<tr class="class2"></tr>
<tr class="class2"></tr>
<tr class="class1"></tr>
<tr class="class1"></tr>
<tr class="class2"></tr>
<tr class="class2"></tr>
<tr class="class2"></tr>
<tr class="class1"></tr>

Вопрос, как при клике на tr с классом class1 выбрать tr class2, до следующего tr class1. То есть если кликнуть на первый tr должны выбраться бы второй и третий tr?

рони · #2 (**permalink**) 27.06.2019, 11:01

happy_Mikhail,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  td{
     height: 35px;
     background-color: hsl(328, 100%, 54%);
     width: 200px;
  }
  .class2 td{
     background-color: hsl(34, 44%, 69%);
  }
  .select td{
      background-color: hsl(203, 92%, 75%);
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
     $("table").on("click",  ".class1", function() {
     $(this).nextUntil(".class1").addClass("select");
})
});
  </script>
</head>

<body>
    <table>
<tr class="class1"><td></td></tr>
<tr class="class2"><td></td></tr>
<tr class="class2"><td></td></tr>
<tr class="class1"><td></td></tr>
<tr class="class1"><td></td></tr>
<tr class="class2"><td></td></tr>
<tr class="class2"><td></td></tr>
<tr class="class2"><td></td></tr>
<tr class="class1"><td></td></tr>

    </table>
</body>
</html>

happy_Mikhail · #3 (**permalink**) 27.06.2019, 11:37

Отлично спасибо большое

Форум

Справочник

Discord чат

Курсы javascript