0

Имеется таблица 3х3. При клике на какой-либо элемент он становится прозрачным. Получается сделать это прописав onClick="this.style.opacity='0';" в каждую из девяти ячеек. Помогите написать функцию, которая делает то же самое, но не лежит, а только вызывается из каждой ячейки.

2 ответа 2

0

Добавьте класс каждой ячейке, например cell. Затем в цикле повесьте обработчик на каждую ячейку

document.querySelectorAll('.cell').forEach(function(cell) {
  cell.addEventListener('click', function() {
    cell.style.opacity = '0'
  })
})
td {
  background-color: red;
}
<table style="width:100%">
  <tr>
    <td class="cell">2</td>
    <td class="cell">3</td>
    <td class="cell">4</td>
  </tr>
  <tr>
    <td class="cell">4</td>
    <td class="cell">5</td>
    <td class="cell">6</td>
  </tr>
  <tr>
    <td class="cell">7</td>
    <td class="cell">8</td>
    <td class="cell">9</td>
  </tr>
</table>

0

С помощью метода querySelectorAll в который передается css селектор, найдите все td. В нашем случае подойдет селектор table td

Затем пройдитесь по полученному массиву циклом forEach где каждый элемент это порядковый экземпляр td

Далее для каждого элемента добавляем событие onclick (клик) при котором происходит toogle свойства opacity

document.querySelectorAll('table td').forEach(function(obj) {
  obj.onclick = function() {
    obj.style.opacity = (obj.style.opacity == 1 || obj.style.opacity == '' ? 0 : 1);
  }
});
td {
  padding: 10px;
}
<table border="1">
  <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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.