按表過濾mySQL查詢結果 <td> 使用jQuery嗎？
[英]Filter mySQL query results in table by <td> using jQuery?
問題描述
我設法建立了表以從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>
1 個解決方案
解決方案1
0 2017-06-19 13:59:03
您需要查看jQuery＃Autocomplete API。 那里有幾個例子。
使用php和/或jquery過濾mysql搜索結果
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.