javascript - 如何在 html 表格中变灰

Question

当我尝试创建 html 表格时，我想知道如何灰化未看到的单元格。

当我点击单元格2时，我想要的结果如下所示。

我尝试了如下代码。如果有更复杂的灰化方法，请告诉我。

谢谢

var $ = jQuery;
$('td').on('click', function(e) {
  e.preventDefault();
  $('table').toggleClass('greyout');
})

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

table {
  border-collapse: collapse;
}

.greyout {
  opacity: 0.2;
  /* Real browsers */
}

<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>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

Answer 1

您需要将该类应用于除被单击的单元格之外的所有单元格，因此请使用 not() 方法。另请注意，要启用后续点击，您需要从任何 td 元素中删除该类，然后再将其添加到下一组。

此外请注意，preventDefault() 在 td 点击处理程序上是多余的，因为没有要阻止的默认操作。另外，如果您想为 $ 起别名，请使用 document.ready 处理程序中的参数。

话虽如此，试试这个:

jQuery($ => {
  let $td = $('td').on('click', function() {
    $td.removeClass('greyout').not(this).addClass('greyout');
  })
});

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

table {
  border-collapse: collapse;
}

.greyout {
  opacity: 0.2;
}

<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>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>