jQuery多列多关键词搜索异常：输入后表格消失求助

之前淘到一段jQuery多列多关键词搜索的代码，效果本来挺赞的，结果接入项目后踩坑了：每次在搜索框输入内容，后面的整个表格内容直接就消失了。

最开始只给部分列加搜索框的时候还好好的，可当我把所有列都配上搜索输入框之后就出问题了——现在哪怕我只留1个搜索框，这个问题还是没解决，完全没法正常用。

我的代码如下（部分内容因原提问未贴全做了补充标注）：

<?php include("dbconnect.php"); ?> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 原提问中未贴入jQuery引入、样式表等头部内容 -->
</head>
<body>
<!-- 表格及搜索输入框结构 -->
<table>
  <thead>
    <tr>
      <!-- 示例列的表头与搜索框，实际项目中为所有列添加了类似结构 -->
      <th>列名1 <input type="text" class="search-input" data-column="0"></th>
      <th>列名2 <input type="text" class="search-input" data-column="1"></th>
      <!-- 更多列的表头及搜索输入框 -->
    </tr>
  </thead>
  <tbody>
    <!-- PHP从数据库拉取数据生成表格行 -->
    <?php
    // 数据库查询逻辑（原提问未贴全，此处为常规示例）
    $sql = "SELECT * FROM target_table";
    $result = mysqli_query($conn, $sql);
    while ($row = mysqli_fetch_array($result)) {
        echo "<tr>";
        echo "<td>" . $row['column1'] . "</td>";
        echo "<td>" . $row['column2'] . "</td>";
        // 对应更多列的内容输出
        echo "</tr>";
    }
    ?>
  </tbody>
</table>

<!-- 原提问中应包含的jQuery引用及搜索逻辑代码 -->
<script src="https://code.jquery.com/jquery-3.x.x.min.js"></script>
<script>
$(document).ready(function() {
    $('.search-input').on('keyup', function() {
        var columnIndex = $(this).data('column');
        var searchValue = $(this).val().toLowerCase();
        
        $('tbody tr').each(function() {
            var cellText = $(this).find('td').eq(columnIndex).text().toLowerCase();
            if (cellText.indexOf(searchValue) === -1) {
                $(this).hide();
            } else {
                $(this).show();
            }
        });
    });
});
</script>
</body>
</html>

有没有大佬能帮忙排查下问题根源，给个可行的解决方案呀？

内容的提问来源于stack exchange，提问作者Björn Plate