Как убрать класс у серийных ячеек в html таблицах

Question

Некоторые события были зарегистрированы в календаре, например html таблицы.

Я хотел бы отменить регистрацию этих событий, щелкнув по ним.

Чтобы реализовать это, я хотел бы удалить класс непрерывных ячеек. как

Когда мы нажимаем 3 или 4, тогда 3, 4 класс ячейки будет удален.

Когда мы нажимаем 13 или 14 или 15, затем 13, 14, 15 класс ячейки будет удален.

Когда мы нажмем 9, тогда будет удален только 9 класс ячейки.

Является ли это возможным?

и есть ли способ это реализовать?

Спасибо

$(function() {
  $("td").click(function() {
    $(this).removeClass();
  });
});

td {
  transition-duration: 0.5s;
  border: solid black 1px;
  padding: 5px;
}

table {
  border-collapse: collapse;
}

.aqua{
background-color:aqua;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td class='aqua'>3</td>
    <td class='aqua'>4</td>
    <td>5</td>  
  </tr>
  <tr>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td class='aqua'>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>11</td>
    <td>12</td>
    <td class='aqua'>13</td>
    <td class='aqua'>14</td>
    <td class='aqua'>15</td>    
  </tr>
</table>

Answer 1

Если вы просто измените свой скрипт, как показано ниже. Ваш код будет работать в соответствии с вашими требованиями.

$(function() {
  $("tr").click(function() {
    $(this).children().removeClass();
  });
});

, иначе вы можете изменить, как показано ниже. Он также отлично работает.

$(function() {
  $("td").click(function() {
    $(this).closest('tr').find('.aqua').removeClass('aqua');
  });
});

Лучший ответ использует второй метод.

Answer 2

Вы можете просто нацеливаться только на ячейки, имеющие этот класс aqua, чтобы достичь этого, вместо нацеливания на каждую ячейку. Затем с помощью .closest('tr') найдите ближайшего родителя tr для ячейки, по которой щелкнули, и после этого с помощью .find('td.aqua') найдите все ячейки, имеющие класс aqua, а затем, наконец, удалите класс из каждой из них.

$(function() {
  $("td.aqua").click(function() {
    $(this).closest('tr').find('td.aqua').removeClass('aqua');
  });
});

td{transition-duration:.5s;border:solid #000 1px;padding:10px;text-align:center}
table{border-collapse:collapse}
.aqua{background-color:#0ff}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td class='aqua'>3</td>
    <td class='aqua'>4</td>
    <td>5</td>  
  </tr>
  <tr>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td class='aqua'>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>11</td>
    <td>12</td>
    <td class='aqua'>13</td>
    <td class='aqua'>14</td>
    <td class='aqua'>15</td>    
  </tr>
</table>

Answer 3

, если вы хотите удалить класс aqua при нажатии на каждую строку, тогда используйте это

$(function() { $("tr").click(function() { $(this).children().removeClass('aqua'); }); });

ИЛИ при нажатии на сами ячейки используйте это

$(function() { $("tr>.aqua").click(function() { $(this).parent().children().removeClass('aqua'); }); });

$(function() {
  $("tr>.aqua").click(function() {
    $(this).parent().children().removeClass('aqua');
  });
});

td {
  transition-duration: 0.5s;
  border: solid black 1px;
  padding: 5px;
}

table {
  border-collapse: collapse;
}

.aqua {
  background-color: aqua;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td class='aqua'>3</td>
    <td class='aqua'>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td class='aqua'>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>11</td>
    <td>12</td>
    <td class='aqua'>13</td>
    <td class='aqua'>14</td>
    <td class='aqua'>15</td>
  </tr>
</table>

Answer 4

Сначала вы можете использовать .closest(), чтобы нацелиться на родительский элемент tr , а затем использовать .find() чтобы нацелить все элементы с помощью класса aqua, чтобы удалить их:

$(function() {
  $("td").click(function() {
    $(this).closest('tr').find('.aqua').removeClass('aqua');
  });
});

td {
  transition-duration: 0.5s;
  border: solid black 1px;
  padding: 5px;
}

table {
  border-collapse: collapse;
}

.aqua{
background-color:aqua;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td class='aqua'>3</td>
    <td class='aqua'>4</td>
    <td>5</td>  
  </tr>
  <tr>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td class='aqua'>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>11</td>
    <td>12</td>
    <td class='aqua'>13</td>
    <td class='aqua'>14</td>
    <td class='aqua'>15</td>    
  </tr>
</table>