Как в одном ряду таблицы активировать не более 5 ячеек?

Question

Подскажите как решить данную задачу: "Сделайте так, чтобы в одном ряду таблице можно было активировать не более 5 ячеек."

const rows = document.querySelectorAll('.table tr');

for (let row of rows) {
  row.addEventListener('click', function(event) {
    let items = document.querySelectorAll('td.green');

    if (items.length < 5) {
      event.target.classList.add('green');
    }
  })
}

td {
  cursor: pointer;
}

.green {
  background-color: green;
}

<table class="table">
  <tr>
    <td>text1</td>
    <td>text1</td>
    <td>text1</td>
    <td>text1</td>
    <td>text1</td>
    <td>text1</td>
  </tr>
  <tr>
    <td>text2</td>
    <td>text1</td>
    <td>text2</td>
    <td>text2</td>
    <td>text2</td>
    <td>text1</td>
  </tr>
  <tr>
    <td>text3</td>
    <td>text3</td>
    <td>text3</td>
    <td>text3</td>
    <td>text3</td>
    <td>text3</td>
  </tr>
</table>

Вот моя попытка решить задачу, но в данном случае работает на 5 активных ячеек по всей таблице, а не в каждом отдельном ряду.

Я никак не могу понять, как зацепится к определенному ряду.

Answer 1

Вам, в слушателе клика, просто надо было искать не в document-е, а в самих строчках row. От себя добавил возможность убирать выделение, если элементов больше пяти, а то после выбора 5-ти ячеек менять ничего нельзя было

const rows = document.querySelectorAll('.table tr');

for (const row of rows) {
  row.addEventListener('click', function(event) {
    const items = row.querySelectorAll('td.green');

    event.target.classList.toggle('green', items.length < 5);
  })
}

body {
  background-color: #777;
}

td {
  cursor: pointer;
}

.green {
  background-color: green;
}

<table class="table">
  <tr>
    <td>text1</td>
    <td>text1</td>
    <td>text1</td>
    <td>text1</td>
    <td>text1</td>
    <td>text1</td>
  </tr>
  <tr>
    <td>text2</td>
    <td>text1</td>
    <td>text2</td>
    <td>text2</td>
    <td>text2</td>
    <td>text1</td>
  </tr>
  <tr>
    <td>text3</td>
    <td>text3</td>
    <td>text3</td>
    <td>text3</td>
    <td>text3</td>
    <td>text3</td>
  </tr>
</table>

Answer 2

const table = document.querySelector('.table');
table.addEventListener('click',({target}) => {
  if (target.tagName == 'TD') {  
    let len = target.closest('tr').querySelectorAll('td.green').length;    
    if (len >= 5) {
      target.classList.remove('green');
      return;
    }    
    target.classList.toggle('green');
  }
})

td {
  cursor: pointer;
}

.green {
  background-color: green;
}

<table class="table">
  <tr>
    <td>text1</td>
    <td>text1</td>
    <td>text1</td>
    <td>text1</td>
    <td>text1</td>
    <td>text1</td>
  </tr>
  <tr>
    <td>text2</td>
    <td>text1</td>
    <td>text2</td>
    <td>text2</td>
    <td>text2</td>
    <td>text1</td>
  </tr>
  <tr>
    <td>text3</td>
    <td>text3</td>
    <td>text3</td>
    <td>text3</td>
    <td>text3</td>
    <td>text3</td>
  </tr>
</table>

БЛОГ НА HUSL

Как в одном ряду таблицы активировать не более 5 ячеек?

Ответы (2 шт):