javascript - 如何删除 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

您可以先使用.closest()定位父 tr 元素，然后使用 .find()以 class 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>