Question

这是我的视图页面，其中包含数据数组及其查看结果使用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;
    }

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

建议我解决这个问题。

Answer 1

以下是解决方案：

JS

 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">

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

1 个答案: