为大表的最后一列添加淡出效果

<table>
  <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>

table {
  border-collapse: collapse;
}

td {
  padding: 10px;
  border: 1px solid #ccc;
}

.fade-out {
  opacity: 0;
}

const table = document.querySelector('table');
const lastColumn = table.querySelectorAll('td:last-child');

lastColumn.forEach((column) => {
  column.addEventListener('click', () => {
    column.classList.add('fade-out');
    setTimeout(() => {
      column.classList.remove('fade-out');
    }, 1000);
  });
});