我在一个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，取决于无线电选择：
<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都在自己的搜索栏中：
<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>
我的问题是，如果我选择第一个选项(value=com(，一切都很好，comDiv就会出现，搜索栏会从mysql数据库中的表中搜索。但如果我选择第二个选项(值=all(，comDiv隐藏，allDiv出现，mysql数据库中的数据显示，但搜索栏不起作用。你能帮帮我吗，我做错了什么？
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>
以及改变表id回显"<table border='1' id='myTable1'>和"<table border='1' id='myTable2'>
我认为应该在函数searchByName((中给出特定的选择器。因为两个表都有相同的id"myTable"。您可以更改表ID，也可以指定$("#comDiv"(.find("myTable"(和$("#allDiv">