一个 php 页面中的两个搜索栏

Question

我在一个 php 页面中有两个搜索栏，但第二个搜索栏不起作用。我有单选按钮组：

<form>
    <p><input type="radio" value="com" name="radioPM" />One</p>  
    <p><input type="radio" value="all" name="radioPM" />Two</p>  
</form>

有一些 jQuery，其中显示 div，取决于收音机 selection:

<script>
    $(document).ready(function () {
        $('input[type=radio][name=radioPM]').change(function () {
            if (this.value == 'com') {
                $("#comDiv").show();
                $("#allDiv").hide();
            } else if (this.value == 'all') {
                $("#allDiv").show();
                $("#comDiv").hide();
            }
        });
    });
</script>

在那之后，我有两个 div，每个都有自己的搜索栏：

<div id ='comDiv' style="display:none">

    <input type="text" id="myInput" onkeyup="searchByName()" placeholder="search..." title="search...">

    <?php
    include_once('query_1.php');

    echo "<table border='1' id='myTable'>
                    <tr>
                        <th>One</th>
                        <th>Two</th>
                    </tr>";

    while ($row = mysqli_fetch_array($query_1)) {
        echo "<form method=\"post\"><tr>";
        echo "<td>" . $row['ONE'] . "</td>";
        echo "<td>" . $row['TWO'] . "</td>";
        echo "</tr></form>";
    }
    echo "</table>";
    ?><br>

</div>

<div id ='allDiv' style="display:none">

    <input type="text" id="myInput" onkeyup="searchByName()" placeholder="search..." title="search...">

    <?php
    include_once('query_2.php');

    echo "<table border='1' id='myTable'>
                    <tr>
                        <th>One</th>
                        <th>Two</th>
                    </tr>";

    while ($row = mysqli_fetch_array($query_2)) {
        echo "<form method=\"post\"><tr>";
        echo "<td>" . $row['ONE'] . "</td>";
        echo "<td>" . $row['TWO'] . "</td>";
        echo "</tr></form>";
    }
    echo "</table>";
    ?><br>

</div>

最后我得到了具有搜索栏功能的脚本：

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

我的问题是，如果我 select 第一个选项 (value=com) 一切正常，出现 comDiv，搜索栏从 mysql 数据库中搜索 table。但是，如果我选择第二个选项 (value=all)，comDiv 隐藏，而 allDiv 出现，来自 mysql 数据库的数据显示，但搜索栏不工作。你能帮帮我吗，我做错了什么？

Answer 1

我认为你应该在函数 searchByName() 中给出特定的选择器。因为 table 具有相同的 ID "myTable"。要么你应该更改 table ID，要么你可以指定 $("#comDiv").find("myTable") 和 $( "#allDiv").find("myTable").

Answer 2

id 在 HTML 文档中必须是唯一的（myInput 和 myTable 使用了两次）

您可以像下面这样更新您的代码或使用 conman 搜索框

<input type="text" id="myInput1" onkeyup="searchByName('myInput1','myTable1')" placeholder="search..." title="search..."> // id as searchByName parameter 

<input type="text" id="myInput2" onkeyup="searchByName('myInput2','myTable2')" placeholder="search..." title="search...">

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

并更改 table id echo "<table border='1' id='myTable1'> 和 "<table border='1' id='myTable2'>

一个 php 页面中的两个搜索栏

Two search bars in one php page

javascript

php

jquery

searchbar