Как серым цветом в html таблицах

Question

Когда я пытаюсь создать html таблицы, мне интересно, как я могу greyout невидимых ячеек.

Когда я нажимаю ячейку 2, мой желаемый результат, как показано ниже.

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

Спасибо

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>

Answer 2

Я бы go для следующих логи c:

$mainTable = $('table');
$mainTable.on('click', 'td', function(){
    if( this.classList.contains('selected') ){
        $(this).removeClass('selected')
    } else{
        $mainTable.find('.selected').removeClass('selected');
        $(this).addClass('selected')
    }

    $mainTable.toggleClass('withSelectedOption', $mainTable.find('.selected').length !== 0);
});

table td{
    background: aqua;
    padding: 10px;
}
table.withSelectedOption td{
    background: grey;
}
table.withSelectedOption td.selected{
    background: 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>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>