主页 / 问题 / 1428428
Accepted
Виктория
Asked:2022-07-10 23:16:00 +0000 UTC2022-07-10 23:16:00 +0000 UTC

如何使当您单击表格中的任何单元格时，该列的所有单元格都被涂成红色？

  • 772

有一个表格：给定以下 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";
        }   
        
    })
})
javascript

2 个回答

  1. Best Answer

    所以？

    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>

    • 0

  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>

    • 0

相关问题