如何为表中每一列创建多个jquery过滤系统

<table>
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行1列1</td>
      <td>行1列2</td>
      <td>行1列3</td>
    </tr>
    <tr>
      <td>行2列1</td>
      <td>行2列2</td>
      <td>行2列3</td>
    </tr>
    <tr>
      <td>行3列1</td>
      <td>行3列2</td>
      <td>行3列3</td>
    </tr>
  </tbody>
</table>

$(document).ready(function() {
  // 获取表格中每一列的元素
  var $columns = $('table th');

  // 遍历每一列
  $columns.each(function(index) {
    var columnIndex = index + 1;
    var $column = $('table td:nth-child(' + columnIndex + ')');
    
    // 为每一列创建过滤系统
    var $filterInput = $('<input type="text" placeholder="过滤" />');
    $filterInput.on('input', function() {
      var filterValue = $(this).val().toLowerCase();
      // 使用filter()函数筛选匹配的行
      var $filteredRows = $column.filter(function() {
        var cellText = $(this).text().toLowerCase();
        return cellText.indexOf(filterValue) > -1;
      });

      // 显示或隐藏筛选结果
      $('table tbody tr').hide();
      $filteredRows.closest('tr').show();
    });

    // 将过滤输入框添加到列标题中
    $(this).append($filterInput);
  });
});