多列過濾器表

只是試圖過濾一個表，但也有它篩選有和沒有破折號（工作）的數字，但也搜索名稱和ID以及。自索引爲[0]以來，它只搜索一列。多列過濾器表

我將如何搜索所有3列？所以如果我搜索數字或ID或名稱它會過濾。這是我迄今爲止搜索編號的工作代碼。

<!DOCTYPE html>  
<html> 
<head>  
<style>  
* {  
    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;  
}  
</style> 

</head>  
<body>   

<h2>Number search</h2>  

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">   

<table id="myTable">  
    <tr class="header">  
    <th style="width:60%;">Number</th> 
    <th style="width:60%;">Name</th> 
    <th style="width:60%;">ID</th>  
    </tr>  
    <tr>  
    <td>905-373-3333</td> 
    <td>Mike</td> 
    <td>4563</td>  
    </tr>  
    <tr>  
    <td>905-333-3333</td> 
    <td>adam</td> 
    <td>8963</td>  
    </tr>  
    <tr>  
    <td>416-373-3432</td> 
    <td>Jim</td> 
    <td>9363</td>  
    </tr>  
</table>   

<script>  
function myFunction() {  
    var input, filter, table, tr, td, i, cleanedFilter;  
    input = document.getElementById("myInput");  
    filter = input.value.toUpperCase();  
    table = document.getElementById("myTable");  
    tr = table.getElementsByTagName("tr");   

    cleanedFilter = filter.replace("-","");   

    for (i = 0; i < tr.length; i++) {  
    td = tr[i].getElementsByTagName("td")[0];    

    if (td) {  
     cellContent = td.innerHTML.toUpperCase().replace(/-/g,"");    

     if (cellContent.indexOf(cleanedFilter) > -1) {  
     tr[i].style.display = "";  
     } else {  
     tr[i].style.display = "none";  
     }  
    }   
    }  
}  
</script>   

</body>  
</html>

來源

2017-08-16 redrain1345

你有沒有考慮過使用數據表（dataTables.net）？它可以做到這一點，開箱即可更直接 –

如果可能，我想這樣做，無論如何，你可以幫助我布萊恩？ – redrain1345

如果你想使用的過濾器爲您提供行每TD，您可以使用以下命令：

(function(document) { 
 
\t 'use strict'; 
 

 
\t var LightTableFilter = (function(Arr) { 
 

 
\t \t var _input; 
 

 
\t \t function _onInputEvent(e) { 
 
\t \t \t _input = e.target; 
 
\t \t \t var tables = document.getElementsByClassName(_input.getAttribute('data-table')); 
 
\t \t \t Arr.forEach.call(tables, function(table) { 
 
\t \t \t \t Arr.forEach.call(table.tBodies, function(tbody) { 
 
\t \t \t \t \t Arr.forEach.call(tbody.rows, _filter); 
 
\t \t \t \t }); 
 
\t \t \t }); 
 
\t \t } 
 

 
\t \t function _filter(row) { 
 
\t \t \t var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase(); 
 
\t \t \t row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row'; 
 
\t \t } 
 

 
\t \t return { 
 
\t \t \t init: function() { 
 
\t \t \t \t var inputs = document.getElementsByClassName('light-table-filter'); 
 
\t \t \t \t Arr.forEach.call(inputs, function(input) { 
 
\t \t \t \t \t input.oninput = _onInputEvent; 
 
\t \t \t \t }); 
 
\t \t \t } 
 
\t \t }; 
 
\t })(Array.prototype); 
 

 
\t document.addEventListener('readystatechange', function() { 
 
\t \t if (document.readyState === 'complete') { 
 
\t \t \t LightTableFilter.init(); 
 
\t \t } 
 
\t }); 
 

 
})(document);

<section class="container"> 
 

 
\t <input type="search" class="light-table-filter" data-table="order-table" placeholder="Filter"> 
 

 
\t <table class="order-table table"> 
 
\t \t <thead> 
 
\t \t \t <tr> 
 
\t \t \t \t <th>Column 1</th> 
 
\t \t \t \t <th>Column 2</th> 
 
\t \t \t \t <th>Number 2</th> 
 
\t \t \t \t <th>Number 2</th> 
 
\t \t \t </tr> 
 
\t \t </thead> 
 
\t \t <tbody> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>Column One</td> 
 
\t \t \t \t <td>Two</td> 
 
\t \t \t \t <td>352353</td> 
 
\t \t \t \t <td>1</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>Column Two</td> 
 
\t \t \t \t <td>Two</td> 
 
\t \t \t \t <td>4646</td> 
 
\t \t \t \t <td>2</td> 
 
\t \t \t </tr> 
 
\t \t </tbody> 
 
\t </table> 
 

 
</section>

來源

2017-09-20 15:20:03

我將如何去將這個.js鏈接到我的html？ –

@JohnGodlee在你的HTML代碼中包含js部分：''。或者，將它保存在一個外部JS文件中，並查看這裏的說明：https://www.w3schools.com/tags/att_script_src.asp讓我知道如果這工作:) –

@JohnGodlee你設法做到了嗎？ –

多列過濾器表

回答

相關問題