如何在Jquery的mouseleave上隐藏单列的单元格？

<table>
  <tr>
    <td class="column1">Cell 1</td>
    <td class="column2">Cell 2</td>
    <td class="column3">Cell 3</td>
  </tr>
  <!-- 添加更多行 -->
</table>

$(document).ready(function() {
  $('td').on('mouseleave', function() {
    // 获取当前鼠标离开的单元格所在的列索引
    var columnIndex = $(this).index();
    
    // 使用选择器选择对应列的所有单元格，并隐藏它们
    $('td').filter(function() {
      return $(this).index() === columnIndex;
    }).hide();
  });
});