Как сделать так, чтобы по клику на любую ячейку таблицы в красный фон красились все ячейки этой колонки?

Question

Есть таблица: Дана следующая HTML таблица:

<table id="table">
    <tr>
        <td data-col="1"></td>
        <td data-col="2"></td>
        <td data-col="3"></td>
    </tr>
    <tr>
        <td data-col="1"></td>
        <td data-col="2"></td>
        <td data-col="3"></td>
    </tr>
    <tr>
        <td data-col="1"></td>
        <td data-col="2"></td>
        <td data-col="3"></td>
    </tr>
</table>

Как сделать так, чтобы по клику на любую ячейку таблицы в красный фон красились все ячейки этой колонки? у меня не получается сделать, чтобы все ячейки колонки окрашивались одновременно по нажатию на одну ячейку.

let tds = document.querySelectorAll('#table td');

tds.forEach(function(td){
        td.addEventListener('click',function(){
        if(td.dataset.col==this.dataset.col){           
            td.style.backgroundColor="red";
        }   
        
    })
})

Answer 1

Так?

const tds = document.querySelectorAll('#table td')

tds.forEach(td => {
  td.addEventListener('click', e => {
    document.querySelectorAll(`#table [data-col="${e.target.dataset.col}"]`).forEach(e =>
      e.style.backgroundColor = 'red'
    )
  })
})

#table td {
  width: 20px;
  height: 20px;
  background-color: green;
}

<table id="table">
    <tr>
        <td data-col="1"></td>
        <td data-col="2"></td>
        <td data-col="3"></td>
    </tr>
    <tr>
        <td data-col="1"></td>
        <td data-col="2"></td>
        <td data-col="3"></td>
    </tr>
    <tr>
        <td data-col="1"></td>
        <td data-col="2"></td>
        <td data-col="3"></td>
    </tr>
</table>

Answer 2

Вы были очень близки. Просто вам нужен либо второй цикл for, либо через селекторы получить все те элементы которые хотите закрасить (к примеру [data-col='3']).

Мой алгоритм через цикл for:

let tds = document.querySelectorAll('#table td');

tds.forEach(function(td){
        td.addEventListener('click',function(){
        let col =this.dataset.col
        tds.forEach(el=>{
          if(el.dataset.col==col){           
            el.style.backgroundColor="red";
          }
        })
         
        
    })
})

table{
width:100%;
 height:100vh;
}

<table id="table">
    <tr>
        <td data-col="1"></td>
        <td data-col="2"></td>
        <td data-col="3"></td>
    </tr>
    <tr>
        <td data-col="1"></td>
        <td data-col="2"></td>
        <td data-col="3"></td>
    </tr>
    <tr>
        <td data-col="1"></td>
        <td data-col="2"></td>
        <td data-col="3"></td>
    </tr>
</table>

БЛОГ НА HUSL

Как сделать так, чтобы по клику на любую ячейку таблицы в красный фон красились все ячейки этой колонки?

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