我想爲每個表格列和一個搜索框創建一個可搜索表格

我有一個由5列組成的基本表格，我想爲每列創建一個可搜索的html網站，框。我怎樣才能做到這一點？我想爲每個表格列和一個搜索框創建一個可搜索表格

這裏是我到目前爲止的代碼，它只有一個搜索框，我想添加一個搜索框到每一列：

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"; 
 
      } 
 
     }  
 
     } 
 
    }

* { 
 
     box-sizing: border-box; 
 
    } 
 
    
 
    #myInput { 
 
     background-image: url('/css/searchicon.png'); 
 
     background-position: 10px 10px; 
 
     background-repeat: no-repeat; 
 
     width: 100%; 
 
     font-size: 16px; 
 
     padding: 12px 20px 12px 40px; 
 
     border: 1px solid #ddd; 
 
     margin-bottom: 12px; 
 
    } 
 
    
 
    #myTable { 
 
     border-collapse: collapse; 
 
     width: 100%; 
 
     border: 1px solid #ddd; 
 
     font-size: 18px; 
 
    } 
 
    
 
    #myTable th, #myTable td { 
 
     text-align: left; 
 
     padding: 12px; 
 
    } 
 
    
 
    #myTable tr { 
 
     border-bottom: 1px solid #ddd; 
 
    } 
 
    
 
    #myTable tr.header, #myTable tr:hover { 
 
     background-color: #f1f1f1; 
 
    }

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
    
 
    <h2>Washer Search</h2> 
 
    
 
    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search" title="Type in a name"> 
 
    
 
    <table id="myTable"> 
 
     <tr class="header"> 
 
     <th style="width:10%;">ZIP</th> 
 
     <th style="width:30%;">CITY</th> 
 
     <th style="width:30%;">PHONE</th> 
 
     <th style="width:30%;">EMAIL</th> 
 
     <th style="width:30%;">COMPLETED</th> \t 
 
     </tr> 
 
     <tr><td>90048</td> \t <td>Los Angeles</td> \t <td>323-000-0000</td> \t <td>[email protected]</td> \t <td>May</td></tr> 
 
    <tr><td>33312</td> \t <td>Dania</td> \t <td>954-000-0000</td> \t <td>[email protected]</td> \t <td>May</td></tr> 
 
    <tr><td>33127</td> \t <td>Miami</td> \t <td>305-000-0000</td> \t <td>[email protected]</td> \t <td>July</td></tr> 
 
    
 
    </table> 
 
    </body> 
 
    </html>

來源

2017-07-15 Monika Grabowska

你可以通過[dataTables]（https://editor.datatables.net/examples/simple/simple） –

的幫助來實現這個功能當我把代碼放在搜索框中時不起作用。我試過這個 - https://datatables.net/examples/api/multi_filter.html –

告訴我們你到目前爲止所嘗試過的。我們不知道你做了什麼。所以我們不能承擔你的錯誤。 –

如果你想5 5列的搜索框，做一個小的修改5類似的JavaScript函數。調用各個搜索框的這些功能。搜索這條線在你的JavaScript函數：

td = tr[i].getElementsByTagName("td")[0];

並作出

td = tr[i].getElementsByTagName("td")[1];

在第二列，而不是第一個搜索。您可以在五個搜索框的每個函數中增加此值。所以每個搜索框只會搜索一個特定的列。

來源

2017-07-15 05:28:16 coder8888

我想爲每個表格列和一個搜索框創建一個可搜索表格

回答

相關問題