【发布时间】：2017-11-21 18:49:23
【问题描述】：
我已经设法设置我的表来反馈我从 MySQL 查询中得到的所有结果。我希望能够使用在每次按键时触发的搜索字段来过滤我的结果，但找不到任何操纵我用来显示数据的方法的示例。
请看下面我的代码，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<title>ProSys Component Lookup</title>
</head>
<body>
<div class="container">
<div class="col-md-12">
<div class="col-md-12">
<div class="page-header">
<h1>ProSys Component Lookup</h1>
</div>
<div class="col-md-6 search">
<form class="styled">
<fieldset>
<input type="text" placeholder="Search..">
</form>
</div>
<div class="col-md-6">
</div>
<div class="panel">
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<table class="table table-striped" id="myTable">
<thead>
<tr>
<th>Location</th>
<th>Manufacturer</th>
<th>Description</th>
<th>PackageSize</th>
<th>Supplier</th>
<th>SupplierNumber</th>
</tr>
</thead>
<tbody>
<tr>
<?php
include("DBConfig.php");
$result = mysql_query("SELECT DrawLocation, Manufacturer, Description, PackageSize, Supplier, SupplierNumber FROM complibrary");
while($complibrary = mysql_fetch_array($result))
{
echo"<td>".$complibrary['DrawLocation']."</td>";
echo"<td>".$complibrary['Manufacturer']."</td>";
echo"<td>".$complibrary['Description']."</td>";
echo"<td>".$complibrary['PackageSize']."</td>";
echo"<td>".$complibrary['Supplier']."</td>";
echo"<td>".$complibrary['SupplierNumber'];
echo "</tr>";
}
mysql_close($conn);
?>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
有什么想法吗？我实际上是在寻找一种方法来过滤从我的查询反馈的标签。
编辑：已经设法找到一种方法来完成这项工作，但它只搜索第一列。是否可以使用输入中的参数开头在所有列中进行此搜索？
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest jQuery -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<title>ProSys Component Lookup</title>
</head>
<body>
<div class="container">
<div class="col-md-12">
<div class="col-md-12">
<div class="page-header">
<h1>ProSys Component Lookup</h1>
</div>
<div class="col-md-6 search">
<form class="styled">
<fieldset>
<input type="text" onkeyup="myFunction()" id="myInput" placeholder="Search..">
</form>
</div>
<div class="col-md-6">
</div>
<div class="panel">
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<table class="table table-striped">
<thead>
<tr>
<th>Location</th>
<th>Manufacturer</th>
<th>Description</th>
<th>PackageSize</th>
<th>Supplier</th>
<th>SupplierNumber</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<?php
include("DBConfig.php");
$result = mysql_query("SELECT DrawLocation, Manufacturer, Description, PackageSize, Supplier, SupplierNumber FROM complibrary");
while($complibrary = mysql_fetch_array($result))
{
echo"<td>".$complibrary['DrawLocation']."</td>";
echo"<td>".$complibrary['Manufacturer']."</td>";
echo"<td>".$complibrary['Description']."</td>";
echo"<td>".$complibrary['PackageSize']."</td>";
echo"<td>".$complibrary['Supplier']."</td>";
echo"<td>".$complibrary['SupplierNumber']."</td>";
echo "</tr>";
}
mysql_close($conn);
?>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function myFunction() {
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")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
</body>
</html>
【问题讨论】：