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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.