複数の列を持つフィルタテーブル

テーブルをフィルタリングするだけでなく、ダッシュ（作業）の有無にかかわらず数字をフィルタリングするだけでなく、名前とIDも検索します。インデックスは[0]であるため、1つの列のみを検索します。複数の列を持つフィルタテーブル

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

あなたはDataTableの（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あなたはそれを行うことができましたか？ –

複数の列を持つフィルタテーブル

答えて

関連する問題