是否可以使用多个输入过滤同一个表?如果是这样的话 - 可以用基于文本和按钮的输入来完成吗?
是否可以为此添加过滤按钮? (道歉,如果它破了。我尽可能地修改代码......):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Albion Next Generation Arming Swords</title>
</head>
<body>
<div class="wrapper">
<header>
<nav style="z-index: 999; float: right; width: 100%;>
<div style="width: 25%; float: right; margin-top: 1%; margin-right: 1%;
font-family: Centaur; font-size: 16px" data-tip="Exe. 'Laird', 'Type
XII' or 'Scottish'">
<input style="margin-left: 0%; width: 100%; " type="text" id="myInput"
onkeyup="myFunction()" placeholder=" Filter by name or bladetype or key-
term" title="Type in a name"></div>
</nav>
</header>
<body>
<section style="padding-top: 11%; float: left; width: 90%; z-index:
999999999999999">
<table id="SwordTable" style="z-index: 999999999999999999999999; width:
100%; height: 100%; margin-right: 15%; padding-left: 2%; font-size: 80%"
cellpadding="2">
<tbody>
<tr>
<td style="width: 100%">
<td style="width: auto"></td>
</tr>
<tr>
<td style="padding-bottom: 5%">
<div class="dropdown">
<a href="Albion Front Page.html">
<img style="float: right" src="images/NORMAN.png" width="95%"
height="auto" alt=""/></a>
<div class="dropdown-content">
<div class="desc">
<p style="text-align: left; font-family: Centaur; font-size: 100%">The
Norman<br>Type Xa<br>$880</p>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td style="padding-bottom: 5%">
<div style="width: 100%" class="dropdown">
<a href="Albion Front Page.html">
<img style="float: right" src="images/SENLAC.png" width="100%"
height="auto" alt=""/></a>
<div class="dropdown-content">
<div class="desc">
<p style="text-align: left; font-family: Centaur; font-size: 100%">The
Senlac<br>Type Xa<br>$880</p>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td style="padding-bottom: 5%">
<div style="width: 100%" class="dropdown">
<a href="Albion Front Page.html">
<img style="float: right" src="images/Templar.png" width="98%"
height="auto" alt=""/></a>
<div style="float: right" class="dropdown-content">
<div class="desc">
<p style="text-align: left; font-family: Centaur; font-size: 100%">The
Templar<br>Type Xa<br>$880</p>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td style="padding-bottom: 5%"><div class="dropdown"><a href="Albion
Front Page.html"><img style="float: right" src="images/REEVE.png"
width="100%" height="auto" alt=""/></a><div class="dropdown-content">
<div class="desc"><p style="text-align: left; font-family: Centaur;
font-size: 100%">The Reeve<br>Late Anglo-Saxon sword<br>Type
X<br>$840</p></div> </div>
</div></td>
</tr>
<tr>
<td style="padding-bottom: 5%"><div class="dropdown"><a href="Albion
Front Page.html"><img style="float: right" src="images/BAYEUX.png"
width="93%" height="auto" alt=""/></a><div class="dropdown-content"><div
class="desc"><p style="text-align: left; font-family: Centaur; font-
size: 100%">The Bayeux<br>Type X<br>$880</p></div> </div>
</div></td>
</tr>
<tr>
<td style="padding-bottom: 5%"><div class="dropdown"><a href="Albion
Front Page.html"><img style="float: right" src="images/VIGIL.png"
width="93%" height="auto" alt=""/></a><div class="dropdown-content"><div
class="desc"><p style="text-align: left; font-family: Centaur; font-
size: 100%">The Vigil<br>Type X<br>$1,210</p></div> </div>
</div></td>
</tr>
<tr>
<td style="padding-bottom: 5%"><div class="dropdown"><a href="Albion
Front Page.html"><img style="float: right" src="images/Oakshott.png"
width="98%" height="auto" alt=""/></a><div class="dropdown-content"><div
class="desc"><p style="text-align: left; font-family: Centaur; font-size:
100%">The Oakeshott<br>Type Xa<br>$1,210</p></div> </div>
</div></td>
</tr>
</tbody>
</table>
<script>
function myFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("SwordTable");
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>
</section>
<div class="push" style="padding-bottom: 20%"></div>
</div>
</body>
</html>
基本上,我想在搜索栏下方添加一些搜索按钮,这些搜索按钮将根据各种特征过滤产品。