Javascript 隐藏行并在搜索时显示

你好， 我正在使用一个动态表，它工作得非常好，但是它变得很长，界面变得很慢

我看到许多关于表中动态搜索的教程，但在任何情况下，行都是隐藏的，然后在搜索时出现，总是列表/行被缩减为关键字

有没有人有任何想法、文件或旧帖子（我真的没有找到）来告诉我怎么做

提前谢谢

        <table class="0" id="demo" cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th align="left">From</th>
                <th align="left">Destination</th>
                <th align="left">Road Distance (km)</th>
                <th align="left">By Air (hrs)</th>
                <th align="left">By Rail (hrs)</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><strong>Sydney</strong></td>
                <td>Adelaide</td>
                <td>1412</td>
                <td>1.4</td>
                <td>25.3</td>
            </tr>
            <tr>
                <td><strong>Sydney</strong></td>
                <td>Brisbane</td>
                <td>982</td>
                <td>1.5</td>
                <td>16</td>
            </tr>
            <tr>
                <td><strong>Sydney</strong></td>
                <td>Canberra</td>
                <td>286</td>
                <td>.6</td>
                <td>4.3</td>
            </tr>
            <tr>
                <td><strong>Sydney</strong></td>
                <td>Melbourne</td>
                <td>872</td>
                <td>1.1</td>
                <td>10.5</td>
            </tr>
            <tr>
                <td><strong>Adelaide</strong></td>
                <td>Perth</td>
                <td>2781</td>
                <td>3.1</td>
                <td>38</td>
            </tr>
            <tr>
                <td><strong>Adelaide</strong></td>
                <td>Alice Springs</td>
                <td>1533</td>
                <td>2</td>
                <td>20.25</td>
            </tr>
            <tr>
                <td><strong>Adelaide</strong></td>
                <td>Brisbane</td>
                <td>2045</td>
                <td>2.15</td>
                <td>40</td>
            </tr>
        </tbody>
    </table> <br><br>
<!-- TABLE FILTER -->

从…起
目的地
道路距离（公里）
空运（小时）
乘火车（小时）
悉尼
阿德莱德
1412
1.4
25.3
悉尼
布里斯班
982
1.5
16
悉尼
堪培拉
286
6.
4.3
悉尼
墨尔本
872
1.1
10.5
阿德莱德
珀斯
2781
3.1
38
阿德莱德
爱丽丝·斯普林斯
1533
2.
20.25
阿德莱德
布里斯班
2045
2.15
40

只需执行相反的操作，在css或style=“display:none”中隐藏它们，并在搜索时使用“隐藏”而不是“隐藏”使用“显示”。这样做的想法是创建一个空白表，根据搜索显示行。这样做，它最初会像我打算的那样很好地隐藏，但当我清理结果时，所有表格都会出现：SydneyAdelaide 1412 1.4 25.3您需要添加一个案例，当搜索为空时，该案例将隐藏所有行。但是，对于少量的字符，例如其中的两个，您可能会遇到问题。它将显示许多行。为什么不选择像数据表这样的工作解决方案，它具有搜索+分页功能？如果您想自己这样做，那么您可以尝试使用搜索添加分页。