使用javascript过滤带有文本和按钮输入的表格?

时间:2017-10-05 15:34:55

标签: javascript html button filter html-table

是否可以使用多个输入过滤同一个表?如果是这样的话 - 可以用基于文本和按钮的输入来完成吗?

是否可以为此添加过滤按钮? (道歉,如果它破了。我尽可能地修改代码......):

<!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>

基本上,我想在搜索栏下方添加一些搜索按钮,这些搜索按钮将根据各种特征过滤产品。

0 个答案:

没有答案