过滤/删除视图中的数据而不刷新页面答案

【问题标题】：Filter/Remove data in view without refreshing page过滤/删除视图中的数据而不刷新页面
【发布时间】：2018-04-19 06:20:20
【问题描述】：

这是我的查看页面，其中包含数据数组及其查看使用 foreach 和 table 标签。

            <?php if (count($catArray) > 0) { ?>
                <center>
                    <table class="table_existing" >
                        <thead>
                            <tr>
                                <th>Cat</th>
                           </tr>
                        </thead>
                        <tbody>

                            <?php
                            foreach ($catArray as $egs) {
                                ?>  
                                <tr style="border-bottom: 1px solid #000">
                                    <td><?php echo $egs->cat; ?></td>
                                  </tr>
                            <?php } ?>
                        </tbody>
                    </table>
                </center>
            <?php } ?>

我想在下拉列表更改时过滤类别数据：

我的下拉代码如下：

 <select  class="inputnw" onchange="searchAllData()">
    <?php echo getType($cd) ?>
</select>

我的 JS 如下：

function searchAllData(){
        var url = '<?php echo site_url("c/e"); ?>';
        window.location.href=url;
    }

页面重新加载时过滤数据。我想要的是在更改searchAllData 方法时过滤$catArray 数组。无需刷新页面。

建议我解决方法。

【问题讨论】：

给我一个关于如何做到这一点的简单示例/链接。
w3schools.com/howto/howto_js_filter_table.asp

标签： javascript php html

【解决方案1】：

解决办法如下：

 function onPageSearch() {
            var input, filter, table, tr, td, i;
            input = document.getElementById("search");
            filter = input.value.toUpperCase();
            table = document.getElementById("catTable");
            tr = table.getElementsByTagName("tr");
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td")[0];
                if (td) {
                    if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = "";
                    } else {
                        tr[i].style.display = "none";
                    }
                }
            }
    }

查看数据：

 <?php if (count($catArray) > 0) { ?>
            <center>
                <table id="catTable" class="table_existing" >
                    <thead>
                        <tr>
                            <th>Cat</th>
                       </tr>
                    </thead>
                    <tbody>

                        <?php
                        foreach ($catArray as $egs) {
                            ?>  
                            <tr style="border-bottom: 1px solid #000">
                                <td><?php echo $egs->cat; ?></td>
                              </tr>
                        <?php } ?>
                    </tbody>
                </table>
            </center>
        <?php } ?>

搜索输入字段：

<input type="text" id="search" onkeyup="onPageSearch()" placeholder="Search">

【讨论】：