我在一个 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 数据库的表中搜索。但是如果我选择第二个选项(值=全部),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 echo "<table border='1' id='myTable1'>
和 "<table border='1' id='myTable2'>
关于javascript - 一个 php 页面中的两个搜索栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53664759/